20220727

README.md

@@ -1,7 +1,14 @@
 # vue3_demo
 
 ## Project setup
-```
+
+```sh
+# 创建项目
+vue create vue3_demo
+# 添加依赖
+cnpm install element-plus --save
+cnpm install axios --save
+# 重新安装依赖
 npm install
 ```
 

doc/acl_tousu前后端接口.md

@@ -0,0 +1,53 @@
+# acl_tousu 前后端接口
+
+## 鉴权接口
+
+token 和 fromSystem参数从url获取
+
+system 固定为 acl_user
+
+```http
+POST http://133.96.94.176:12128/api/verification
+Content-Type: application/json
+
+{
+  "token": "test_token_abc",
+  "fromSystem": "test",
+  "system": "acl_user"
+}
+```
+
+```json
+{
+  "success": true,
+  "code": 1,
+  "message": "成功",
+  "data": {
+    "loginName": "test_hebei",
+    "userName": "测试用户_全省",
+    "belongCity": {
+        "cityId": -1,
+        "cityNameZh": "河北省",
+        "cityNameEn": "hebei",
+        "ord": 1,
+        "province": "河北省"
+    },
+    "roles": [
+      {
+        "roleId": 19,
+        "roleName": "用户权限管理",
+        "cities": [
+            {
+                "cityId": -1,
+                "cityNameZh": "河北省",
+                "cityNameEn": "hebei",
+                "ord": 1,
+                "province": "河北省"
+            }
+            
+        ] 
+      }
+    ]
+  }
+}
+```

jsconfig.json

@@ -16,4 +16,4 @@
       "scripthost"
     ]
   }
-}
+}

package.json

@@ -7,7 +7,9 @@
     "build": "vue-cli-service build"
   },
   "dependencies": {
+    "axios": "^0.27.2",
     "core-js": "^3.8.3",
+    "element-plus": "^2.2.10",
     "vue": "^3.2.13",
     "vue-router": "^4.0.3",
     "vuex": "^4.0.0"

src/App.vue

@@ -1,14 +1,21 @@
 <template>
-  <nav>
-    <router-link to="/">Home</router-link> |
-    <router-link to="/about">About</router-link>
-  </nav>
-  <router-view/>
+  <page-header></page-header>
+  <router-view />
 </template>
 
+<script>
+import PageHeader from "@/components/PageHeader.vue";
+export default {
+  components: {
+    PageHeader,
+  },
+  setup() {},
+};
+</script>
+
 <style>
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
+  font-family: Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;

src/components/HelloWorld.vue

@@ -1,59 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/PageHeader.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <h1>page-header</h1>
+  </div>
+</template>
+
+<script>
+/**
+ * 固定的头，左侧可能放个logo， 右侧显示一下登录的姓名信息
+ */
+export default {};
+</script>
+
+<style>
+</style>

src/main.js

@@ -2,5 +2,7 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
 
-createApp(App).use(store).use(router).mount('#app')
+createApp(App).use(ElementPlus).use(store).use(router).mount('#app')

src/router/index.js

@@ -1,19 +1,20 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
 
 const routes = [
   {
     path: '/',
-    name: 'home',
-    component: HomeView
+    name: 'UserList',
+    component: () => import('@/views/UserList')
   },
   {
-    path: '/about',
-    name: 'about',
-    // route level code-splitting
-    // 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')
+    path: '/userinfo',
+    name: 'UserInfo',
+    component: () => import('@/views/UserInfo')
+  },
+  {
+    path: '/error',
+    name: 'ErrorPage',
+    component: () => import('@/views/ErrorPage')
   }
 ]
 

src/views/AboutView.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

src/views/ErrorPage/index.vue

@@ -0,0 +1,16 @@
+<template>
+    
+  <div>
+    <h1>错误提示页面</h1>
+  </div>
+</template>
+
+<script>
+/**
+ * 针对无权限用户的错误提示页面
+ */
+export default {};
+</script>
+
+<style>
+</style>

src/views/HomeView.vue

@@ -1,18 +0,0 @@
-<template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
-</template>
-
-<script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
-
-export default {
-  name: 'HomeView',
-  components: {
-    HelloWorld
-  }
-}
-</script>

src/views/UserInfo/index.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <h1>这里是用户详情页</h1>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style>
+</style>

src/views/UserList/index.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <h1>这里是用户列表页</h1>
+    <el-divider />
+    <el-form :inline="true">
+      <el-form-item label="归属区县">
+        <el-select placeholder="活动区域">
+          <el-option
+            label="区域一"
+            value="shanghai"
+          ></el-option>
+          <el-option
+            label="区域二"
+            value="beijing"
+          ></el-option>
+
+        </el-select>
+      </el-form-item>
+      <el-form-item label="检索条件">
+        <el-input></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button>查询</el-button>
+      </el-form-item>
+    </el-form>
+    <el-divider />
+    <el-table></el-table>
+  </div>
+</template>
+
+<script>
+/**
+ * 1. 鉴权 用户进入列表页会在url上携带fromSystem 和 token 两个参数，使用这两个参数调用鉴权接口（见文档）
+ *    有权限用户显示列表页，无权限用户跳转到error页面
+ * 2. 分域 1中获取到的用户权限信息中，包含用户有权限的地市信息， 分域主要体现在归属区县和列表数据的查询
+ * 
+ */
+export default {
+  setup() {},
+};
+</script>
+
+<style>
+</style>