update

RffernceResource.vue

@@ -0,0 +1,102 @@
+<template>
+    <div>
+        <!-- button -->
+        <el-row>
+            <el-button plain>朴素按钮</el-button>
+            <el-button type="primary" plain>主要按钮</el-button>
+            <el-button type="success" plain>成功按钮</el-button>
+            <el-button type="info" plain>信息按钮</el-button>
+            <el-button type="warning" plain>警告按钮</el-button>
+            <el-button type="danger" plain>危险按钮</el-button>
+        </el-row>
+        <br />
+        <!-- table表格 -->
+        <el-table :data="tableData" style="width: 100%">
+            <el-table-column prop="date" label="日期" width="180"> </el-table-column>
+            <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
+            <el-table-column prop="address" label="地址"> </el-table-column>
+        </el-table>
+        <br />
+        <!-- pagination分页 -->
+        <el-pagination background layout="sizes, prev, pager, next" @size-change="handleSizeChange"
+            @current-change="handleCurrentChange" :total="1000">
+        </el-pagination>
+        <br />
+        <!-- 对话框 -->
+        <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
+
+        <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
+            <el-form :model="form">
+                <el-form-item label="活动名称" :label-width="formLabelWidth">
+                    <el-input v-model="form.name" autocomplete="off"></el-input>
+                </el-form-item>
+                <el-form-item label="活动区域" :label-width="formLabelWidth">
+                    <el-select v-model="form.region" placeholder="请选择活动区域">
+                        <el-option label="区域一" value="shanghai"></el-option>
+                        <el-option label="区域二" value="beijing"></el-option>
+                    </el-select>
+                </el-form-item>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button @click="dialogFormVisible = false">取 消</el-button>
+                <el-button type="primary" @click="submit">确 定</el-button>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            tableData: [
+                {
+                    date: "2016-05-02",
+                    name: "王小虎",
+                    address: "上海市普陀区金沙江路 1518 弄",
+                },
+                {
+                    date: "2016-05-04",
+                    name: "王小虎",
+                    address: "上海市普陀区金沙江路 1517 弄",
+                },
+                {
+                    date: "2016-05-01",
+                    name: "王小虎",
+                    address: "上海市普陀区金沙江路 1519 弄",
+                },
+                {
+                    date: "2016-05-03",
+                    name: "王小虎",
+                    address: "上海市普陀区金沙江路 1516 弄",
+                },
+            ],
+            dialogFormVisible: false,
+            form: {
+                name: "",
+                region: "",
+                date1: "",
+                date2: "",
+                delivery: false,
+                type: [],
+                resource: "",
+                desc: "",
+            },
+            formLabelWidth: "120px",
+        };
+    },
+    methods: {
+        handleSizeChange(val) {
+            alert(val);
+        },
+        handleCurrentChange(val) {
+            alert("页码变化：" + val);
+        },
+        submit() {
+            alert(JSON.stringify(this.form));
+        }
+    },
+};
+</script>
+
+<style></style>

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "core-js": "^3.8.3",
+    "element-ui": "^2.15.14",
     "vue": "^2.6.14",
     "vue-router": "^3.5.1"
   },

pnpm-lock.yaml

@@ -11,6 +11,9 @@ importers:
       core-js:
         specifier: ^3.8.3
         version: 3.39.0
+      element-ui:
+        specifier: ^2.15.14
+        version: 2.15.14(vue@2.7.16)
       vue:
         specifier: ^2.6.14
         version: 2.7.16
@@ -1081,6 +1084,9 @@ packages:
     resolution: {integrity: sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==}
     engines: {node: '>=8'}
 
+  async-validator@1.8.5:
+    resolution: {integrity: sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==}
+
   async@2.6.4:
     resolution: {integrity: sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==}
 
@@ -1095,6 +1101,9 @@ packages:
     peerDependencies:
       postcss: ^8.1.0
 
+  babel-helper-vue-jsx-merge-props@2.0.3:
+    resolution: {integrity: sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg==}
+
   babel-loader@8.4.1:
     resolution: {integrity: sha512-nXzRChX+Z1GoE6yWavBQg6jDslyFF3SDjl2paADuoQtQW10JqShJt62R6eJQ5m/pjJFDT8xgKIWSP85OY8eXeA==}
     engines: {node: '>= 8.9'}
@@ -1120,6 +1129,9 @@ packages:
     peerDependencies:
       '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0
 
+  babel-runtime@6.26.0:
+    resolution: {integrity: sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==}
+
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
@@ -1499,6 +1511,10 @@ packages:
   core-js-compat@3.39.0:
     resolution: {integrity: sha512-VgEUx3VwlExr5no0tXlBt+silBvhTryPwCXRI2Id1PN8WTKu7MreethvddqOubrYxkFdv/RnYrqlv1sFNAUelw==}
 
+  core-js@2.6.12:
+    resolution: {integrity: sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==}
+    deprecated: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
+
   core-js@3.39.0:
     resolution: {integrity: sha512-raM0ew0/jJUqkJ0E6e8UDtl+y/7ktFivgWvqw8dNSQeNWoSDLvQ1H/RN3aPXB9tBd4/FhyR4RDPGhsNIMsAn7g==}
 
@@ -1721,6 +1737,11 @@ packages:
   electron-to-chromium@1.5.71:
     resolution: {integrity: sha512-dB68l59BI75W1BUGVTAEJy45CEVuEGy9qPVVQ8pnHyHMn36PLPPoE1mjLH+lo9rKulO3HC2OhbACI/8tCqJBcA==}
 
+  element-ui@2.15.14:
+    resolution: {integrity: sha512-2v9fHL0ZGINotOlRIAJD5YuVB8V7WKxrE9Qy7dXhRipa035+kF7WuU/z+tEmLVPBcJ0zt8mOu1DKpWcVzBK8IA==}
+    peerDependencies:
+      vue: ^2.5.17
+
   emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
 
@@ -2620,6 +2641,9 @@ packages:
     resolution: {integrity: sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==}
     engines: {node: '>=10'}
 
+  normalize-wheel@1.0.1:
+    resolution: {integrity: sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA==}
+
   npm-run-path@2.0.2:
     resolution: {integrity: sha512-lJxZYlT4DW/bRUtFh1MQIWqmLwQfAxnqWG4HhEdjMlkrJYnJn0Jrr2u3mgxqaWsdiBc76TYkTG/mhrnYTuzfHw==}
     engines: {node: '>=4'}
@@ -3070,6 +3094,9 @@ packages:
   regenerate@1.4.2:
     resolution: {integrity: sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==}
 
+  regenerator-runtime@0.11.1:
+    resolution: {integrity: sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==}
+
   regenerator-runtime@0.14.1:
     resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
 
@@ -3109,6 +3136,9 @@ packages:
   requires-port@1.0.0:
     resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
 
+  resize-observer-polyfill@1.5.1:
+    resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==}
+
   resolve-from@4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
@@ -3418,6 +3448,10 @@ packages:
     peerDependencies:
       webpack: ^4.27.0 || ^5.0.0
 
+  throttle-debounce@1.1.0:
+    resolution: {integrity: sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg==}
+    engines: {node: '>=4'}
+
   thunky@1.1.0:
     resolution: {integrity: sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==}
 
@@ -5253,6 +5287,10 @@ snapshots:
 
   astral-regex@2.0.0: {}
 
+  async-validator@1.8.5:
+    dependencies:
+      babel-runtime: 6.26.0
+
   async@2.6.4:
     dependencies:
       lodash: 4.17.21
@@ -5269,6 +5307,8 @@ snapshots:
       postcss: 8.4.49
       postcss-value-parser: 4.2.0
 
+  babel-helper-vue-jsx-merge-props@2.0.3: {}
+
   babel-loader@8.4.1(@babel/core@7.26.0)(webpack@5.97.1):
     dependencies:
       '@babel/core': 7.26.0
@@ -5306,6 +5346,11 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  babel-runtime@6.26.0:
+    dependencies:
+      core-js: 2.6.12
+      regenerator-runtime: 0.11.1
+
   balanced-match@1.0.2: {}
 
   base64-js@1.5.1: {}
@@ -5552,6 +5597,8 @@ snapshots:
     dependencies:
       browserslist: 4.24.2
 
+  core-js@2.6.12: {}
+
   core-js@3.39.0: {}
 
   core-util-is@1.0.3: {}
@@ -5779,6 +5826,16 @@ snapshots:
 
   electron-to-chromium@1.5.71: {}
 
+  element-ui@2.15.14(vue@2.7.16):
+    dependencies:
+      async-validator: 1.8.5
+      babel-helper-vue-jsx-merge-props: 2.0.3
+      deepmerge: 1.5.2
+      normalize-wheel: 1.0.1
+      resize-observer-polyfill: 1.5.1
+      throttle-debounce: 1.1.0
+      vue: 2.7.16
+
   emoji-regex@8.0.0: {}
 
   emojis-list@3.0.0: {}
@@ -6664,6 +6721,8 @@ snapshots:
 
   normalize-url@6.1.0: {}
 
+  normalize-wheel@1.0.1: {}
+
   npm-run-path@2.0.2:
     dependencies:
       path-key: 2.0.1
@@ -7111,6 +7170,8 @@ snapshots:
 
   regenerate@1.4.2: {}
 
+  regenerator-runtime@0.11.1: {}
+
   regenerator-runtime@0.14.1: {}
 
   regenerator-transform@0.15.2:
@@ -7150,6 +7211,8 @@ snapshots:
 
   requires-port@1.0.0: {}
 
+  resize-observer-polyfill@1.5.1: {}
+
   resolve-from@4.0.0: {}
 
   resolve@1.22.8:
@@ -7491,6 +7554,8 @@ snapshots:
       schema-utils: 3.3.0
       webpack: 5.97.1
 
+  throttle-debounce@1.1.0: {}
+
   thunky@1.1.0: {}
 
   to-regex-range@5.0.1:

public/css/main.css

@@ -0,0 +1,51 @@
+html{
+    margin: 0;
+    padding: 0;
+    background-color: #fff;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+body{
+    margin: 0;
+    padding: 0;
+    height: 100%;;
+    width: 100%;
+}
+
+a{
+    text-decoration: none;
+}
+
+darkblue{
+    color: darkblue;
+}
+
+.header{
+    background-color: #1cf;
+    line-height: 100%;
+    color: #fff;
+}
+
+.el-menu-item i{
+    color: white;
+}
+.el-menu-item.is-active{
+    font-size: larger;
+}
+.aside{
+    height: 100%;
+}
+.container{
+    width: 100%;
+    height: 100%;
+}
+
+.H-full{
+    height: 100%;
+}
+.W-full{
+    width: 100%;
+}
+

public/index.html

@@ -1,10 +1,11 @@
 <!DOCTYPE html>
-<html lang="">
+<html lang="zh-cn">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>
@@ -14,4 +15,5 @@
     <div id="app"></div>
     <!-- built files will be auto injected -->
   </body>
+  <link rel="stylesheet" href="css/main.css">
 </html>

src/App.vue

@@ -1,32 +1,54 @@
 <template>
-  <div id="app">
+  <div class="container">
-    <nav>
+    <el-container class="container">
-      <router-link to="/">Home</router-link> |
+      <!-- 标题 -->
-      <router-link to="/about">About</router-link>
+      <el-header class="header">
-    </nav>
+        <h1>学生信息管理系统</h1>
-    <router-view/>
+      </el-header>
+      <el-container class="container">
+        <!-- 侧栏 -->
+        <el-aside class="aside" width="200px">
+          <el-menu class="el-menu-vertical H-full" background-color="#2bf" text-color="#fff"
+            icon-color="#fff" active-text-color="#f35">
+            <router-link to="student">
+              <el-menu-item index="1">
+                <i class="el-icon-user-solid"></i>
+                <span slot="title">学生信息</span>
+              </el-menu-item>
+            </router-link>
+            <router-link to="course">
+              <el-menu-item index="2">
+                <i class="el-icon-menu"></i>
+                <span slot="title">课程信息</span>
+              </el-menu-item>
+            </router-link>
+            <router-link to="teacher">
+              <el-menu-item index="3">
+                <i class="el-icon-s-management"></i>
+                <span slot="title">教师信息</span>
+              </el-menu-item>
+            </router-link>
+          </el-menu>
+        </el-aside>
+        <!-- 内容 -->
+        <el-main>
+          <router-view></router-view>
+        </el-main>
+      </el-container>
+    </el-container>
   </div>
 </template>
 
-<style>
+<script>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
 
-nav {
+export default {
-  padding: 30px;
+  data() {
+    return {
     }
+  },
+  methods: {
+  }
+}
+</script>
 
-nav a {
+<style></style>
-  font-weight: bold;
-  color: #2c3e50;
-}
-
-nav a.router-link-exact-active {
-  color: #42b983;
-}
-</style>

src/main.js

@@ -1,6 +1,11 @@
 import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
+//引入element-ui
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+//在vue中启用element-ui
+Vue.use(ElementUI);
 
 Vue.config.productionTip = false
 

src/router/index.js

@@ -1,22 +1,19 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import HomeView from '../views/HomeView.vue'
+
 
 Vue.use(VueRouter)
 
 const routes = [
   {
     path: '/',
-    name: 'home',
+    name: 'root',
-    component: HomeView
+    component: () => import('../App.vue')
   },
   {
-    path: '/about',
+    path: '/course',
-    name: 'about',
+    name: 'course',
-    // route level code-splitting
+    component: () => import('../views/course/CourseList.vue')
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
   }
 ]
 

src/views/course/CourseList.vue

@@ -0,0 +1,112 @@
+<template>
+    <div class="container">
+        <!-- 查询表单 -->
+        <el-form :inline="true" :model="courseSearchForm" class="demo-form-inline">
+            <el-form-item label="课程名称">
+                <el-input v-model="courseSearchForm.courseName" placeholder="课程名称"></el-input>
+            </el-form-item>
+            <el-form-item label="性质">
+                <el-select v-model="courseSearchForm.courseType" placeholder="性质">
+                    <el-option v-for="(courseType, index) in courseTypes" :key="courseType" :label="courseType"
+                        :value="index + 1"></el-option>
+                    <el-option label="区域二" value="beijing"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" @click="courseSearch">查询</el-button>
+            </el-form-item>
+            <el-form-item>
+                <el-button plain @click="courseSearchClear">清除</el-button>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="success" @click="courseAdd" style="margin-left: 60px;">添加</el-button>
+            </el-form-item>
+        </el-form>
+
+        <!-- 课程表格 -->
+        <el-table :data="courseList.data">
+            <el-table-column prop="name" label="名称"></el-table-column>
+            <el-table-column label="性质" width="150px">
+                <template slot-scope="scope">
+                    <div>{{ courseTypes[scope.row.type - 1] }}</div>
+                </template>
+            </el-table-column>
+            <el-table-column prop="credit" label="学分" width="70px"></el-table-column>
+            <el-table-column prop="grade" label="年级" width="80px"></el-table-column>
+            <el-table-column label="专业" width="120px">
+                <template slot-scope="scope">
+                    <div>{{ courseMajors[scope.row.major - 1] }}</div>
+                </template>
+            </el-table-column>
+            <el-table-column label="备注" width="50px">
+                <template slot-scope="scope">
+                    <el-popover trigger="click" placement="left">
+                        <div style="max-width: 320px;">
+                            <p v-if="scope.row.detail.length > 0">{{ scope.row.detail }}</p>
+                            <p v-else>没有备注信息</p>
+                        </div>
+                        <i class="el-icon-info" slot="reference"></i>
+                    </el-popover>
+
+                </template>
+            </el-table-column>
+            <el-table-column label="操作" width="180px">
+                <template slot-scope="scope">
+                    <div>
+                        <el-button size="mini" type="primary" @click="courseEdit(scope.row.id)">编辑</el-button>
+                        <el-button size="mini" type="danger" @click="courseDelete(scope.row.id)">删除</el-button>
+                    </div>
+                </template>
+            </el-table-column>
+        </el-table>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            courseSearchForm: {
+                courseName: '',
+                courseType: ''
+            },
+            courseTypes: ['公共基础必修课',
+                '公共选修课',
+                '学科基础课',
+                '专业必修课',
+                '专业选修课',
+                '集中性实践教学环节'],
+            courseMajors: ['软件工程', '空间信息', '大数据'],
+            courseList: {
+                total: 0,
+                pageSize: 15,
+                page: 0,
+                data: [
+                    { id: 1, name: "数学", type: "2", credit: "3", grade: "2015", major: "1", detail: "这是一些备注内容" },
+                    { id: 2, name: "数学", type: "2", credit: "3", grade: "2015", major: "3", detail: "这是一些很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长备注内容" },
+                    { id: 3, name: "数学", type: "2", credit: "3", grade: "2015", major: "3", detail: "" },
+                ]
+            }
+        };
+    },
+    methods: {
+        courseSearch() {
+            alert("搜索：" + JSON.stringify(this.courseSearchForm));
+        },
+        courseSearchClear() {
+            this.courseSearchForm.courseName = '';
+            this.courseSearchForm.courseType = '';
+            this.courseSearch();
+        },
+        courseEdit(id){
+            alert("编辑:"+id);
+        },
+        courseDelete(id){
+            alert("删除"+id);
+        },
+        courseAdd(){
+            alert("添加课程");
+        }
+    },
+};
+</script>

vue.config.js

@@ -1,4 +1,7 @@
 const { defineConfig } = require('@vue/cli-service')
 module.exports = defineConfig({
-  transpileDependencies: true
+  transpileDependencies: true,
+  devServer:{
+    port: 7000
+  }
 })