├── .gitattributes ├── LICENSE ├── README.md ├── add.gif ├── data └── users.txt ├── edit.gif ├── remove.gif ├── search.gif ├── server ├── app.js ├── models │ └── User.js └── package.json └── vue ├── package.json ├── webpack.config.js └── www ├── app ├── App.vue ├── app.js ├── components │ └── users │ │ └── index.vue └── store │ ├── index.js │ └── users │ ├── actions.js │ ├── mutations.js │ └── state.js ├── css ├── fonts │ ├── ionicons.svg │ ├── ionicons.ttf │ └── ionicons.woff └── iview.css └── index.html /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Jingjing Song 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 人员管理系统 2 | ================================== 3 | 4 | **1. 简介** 5 | ---------------------------------- 6 | 一款基于vue2.0的人员管理系统，样式使用iviewui框架。 7 | 数据库语言：mongoose 8 | 后台接口语言：node.js 9 | 10 | 实现对数据库中的人员信息的增加，编辑，删除，以及模糊查询。 11 | 12 | **2. 使用：** 13 | ------------------------------ 14 | 数据导入数据库中 15 | 数据库开机 mongod --dbpath 数据的存储路径 16 | 后端运行：npm install 17 | node app.js 18 | 前端运行：npm install 19 | npm run dev 20 | 21 | 22 | **3. 示例演示：** 23 | ------------------------------ 24 | 1. 添加人员信息 25 | ![添加](https://www.github.com/BECUZELUVE/vue_management/raw/master/add.gif) 26 | 2. 删除人员信息 27 | ![删除](https://www.github.com/BECUZELUVE/vue_management/raw/master/remove.gif) 28 | 3. 编辑人员信息 29 | ![编辑](https://www.github.com/BECUZELUVE/vue_management/raw/master/edit.gif) 30 | 4. 模糊查询 31 | ![查询](https://www.github.com/BECUZELUVE/vue_management/raw/master/search.gif) 32 | -------------------------------------------------------------------------------- /add.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BECUZELUVE/vue_management/ade3f318293246d33120839bbc7489e989d03462/add.gif -------------------------------------------------------------------------------- /data/users.txt: -------------------------------------------------------------------------------- 1 | {"id":100000,"name":"孔军","age":18,"tel":"5813176976","sex":"男","job":"设计"} 2 | {"id":100001,"name":"袁丽","age":84,"tel":"10004406755","sex":"男","job":"前台"} 3 | {"id":100002,"name":"马超","age":30,"tel":"3708456616","sex":"男","job":"设计"} 4 | {"id":100003,"name":"孙娜","age":54,"tel":"3997236255","sex":"女","job":"后端"} 5 | {"id":100004,"name":"马伟","age":16,"tel":"7613237129","sex":"男","job":"后端"} 6 | {"id":100005,"name":"于娟","age":51,"tel":"12718728915","sex":"女","job":"项目组长"} 7 | {"id":100006,"name":"江明","age":27,"tel":"13778588558","sex":"女","job":"设计"} 8 | {"id":100007,"name":"邓明","age":76,"tel":"9046382738","sex":"男","job":"人力"} 9 | {"id":100008,"name":"姜丽","age":35,"tel":"2648260215","sex":"男","job":"设计"} 10 | {"id":100009,"name":"石磊","age":58,"tel":"6846471317","sex":"男","job":"设计"} 11 | {"id":100010,"name":"薛超","age":20,"tel":"2881750202","sex":"男","job":"前台"} 12 | {"id":100011,"name":"蒋霞","age":23,"tel":"5727397167","sex":"女","job":"项目组长"} 13 | {"id":100012,"name":"曹静","age":54,"tel":"1954439338","sex":"女","job":"人力"} 14 | {"id":100013,"name":"谭明","age":81,"tel":"10946435482","sex":"女","job":"人力"} 15 | {"id":100014,"name":"于刚","age":73,"tel":"11256261826","sex":"女","job":"项目组长"} 16 | {"id":100015,"name":"范超","age":43,"tel":"9950743565","sex":"男","job":"人力"} 17 | {"id":100016,"name":"胡敏","age":38,"tel":"12022764583","sex":"女","job":"产品经理"} 18 | {"id":100017,"name":"潘敏","age":63,"tel":"7123482750","sex":"女","job":"前端"} 19 | {"id":100018,"name":"赖杰","age":87,"tel":"5711623840","sex":"女","job":"项目组长"} 20 | {"id":100019,"name":"郭磊","age":59,"tel":"8853247277","sex":"男","job":"前端"} 21 | {"id":100020,"name":"贾刚","age":60,"tel":"9576187517","sex":"女","job":"后端"} 22 | {"id":100021,"name":"刘艳","age":24,"tel":"5421437316","sex":"女","job":"产品经理"} 23 | {"id":100022,"name":"顾秀英","age":18,"tel":"4655147758","sex":"女","job":"设计"} 24 | {"id":100023,"name":"姜涛","age":15,"tel":"8659959418","sex":"女","job":"人力"} 25 | {"id":100024,"name":"刘秀兰","age":70,"tel":"4286537662","sex":"女","job":"后端"} 26 | {"id":100025,"name":"金霞","age":70,"tel":"9068110026","sex":"女","job":"前台"} 27 | {"id":100026,"name":"李秀兰","age":77,"tel":"6805934312","sex":"女","job":"人力"} 28 | {"id":100027,"name":"方明","age":51,"tel":"6545186789","sex":"女","job":"产品经理"} 29 | {"id":100028,"name":"黄勇","age":63,"tel":"8473923952","sex":"女","job":"项目组长"} 30 | {"id":100029,"name":"苏娟","age":50,"tel":"13558743140","sex":"男","job":"人力"} 31 | {"id":100030,"name":"傅艳","age":44,"tel":"10966924220","sex":"女","job":"后端"} 32 | {"id":100031,"name":"马杰","age":54,"tel":"7391082803","sex":"女","job":"前台"} 33 | {"id":100032,"name":"刘杰","age":33,"tel":"7045228708","sex":"男","job":"后端"} 34 | {"id":100033,"name":"赵平","age":52,"tel":"4568286689","sex":"男","job":"前台"} 35 | {"id":100034,"name":"余明","age":76,"tel":"5822808733","sex":"男","job":"后端"} 36 | {"id":100035,"name":"秦军","age":72,"tel":"3518079546","sex":"女","job":"产品经理"} 37 | {"id":100036,"name":"吴敏","age":87,"tel":"3056572236","sex":"男","job":"后端"} 38 | {"id":100037,"name":"董秀英","age":17,"tel":"6805534858","sex":"女","job":"设计"} 39 | {"id":100038,"name":"田丽","age":41,"tel":"4438690524","sex":"女","job":"后端"} 40 | {"id":100039,"name":"易洋","age":51,"tel":"4662227340","sex":"女","job":"前台"} 41 | {"id":100040,"name":"李秀英","age":50,"tel":"11607747781","sex":"女","job":"前台"} 42 | {"id":100041,"name":"崔芳","age":35,"tel":"8609705268","sex":"男","job":"设计"} 43 | {"id":100042,"name":"贺霞","age":73,"tel":"5225307020","sex":"男","job":"人力"} 44 | {"id":100043,"name":"戴娟","age":57,"tel":"2926186837","sex":"男","job":"前台"} 45 | {"id":100044,"name":"孔超","age":81,"tel":"12344570038","sex":"女","job":"后端"} 46 | {"id":100045,"name":"林强","age":23,"tel":"8806362931","sex":"男","job":"前台"} 47 | {"id":100046,"name":"潘涛","age":35,"tel":"6743358372","sex":"男","job":"项目组长"} 48 | {"id":100047,"name":"陆杰","age":72,"tel":"10035102784","sex":"男","job":"人力"} 49 | {"id":100048,"name":"胡勇","age":42,"tel":"9265022246","sex":"女","job":"产品经理"} 50 | {"id":100049,"name":"冯勇","age":46,"tel":"9125818872","sex":"男","job":"后端"} 51 | {"id":100050,"name":"汪艳","age":82,"tel":"5200078748","sex":"男","job":"设计"} 52 | {"id":100051,"name":"薛平","age":31,"tel":"9439829709","sex":"男","job":"前台"} 53 | {"id":100052,"name":"雷娟","age":60,"tel":"11241886571","sex":"男","job":"前台"} 54 | {"id":100053,"name":"罗刚","age":63,"tel":"3310918342","sex":"男","job":"后端"} 55 | {"id":100054,"name":"段强","age":22,"tel":"2898924176","sex":"女","job":"前台"} 56 | {"id":100055,"name":"谭洋","age":69,"tel":"8785406052","sex":"男","job":"前端"} 57 | {"id":100056,"name":"黎霞","age":41,"tel":"12738915466","sex":"男","job":"产品经理"} 58 | {"id":100057,"name":"赵涛","age":37,"tel":"4882014034","sex":"男","job":"人力"} 59 | {"id":100058,"name":"范芳","age":87,"tel":"7095793895","sex":"男","job":"设计"} 60 | {"id":100059,"name":"董艳","age":33,"tel":"12767880231","sex":"女","job":"前台"} 61 | {"id":100060,"name":"梁娟","age":33,"tel":"6931303108","sex":"女","job":"前台"} 62 | {"id":100061,"name":"黄娜","age":54,"tel":"5941841563","sex":"男","job":"后端"} 63 | {"id":100062,"name":"陈霞","age":24,"tel":"8593722771","sex":"男","job":"设计"} 64 | {"id":100063,"name":"马超","age":74,"tel":"12236364671","sex":"男","job":"人力"} 65 | {"id":100064,"name":"康秀兰","age":76,"tel":"12130587206","sex":"男","job":"前端"} 66 | {"id":100065,"name":"廖静","age":32,"tel":"13559270283","sex":"男","job":"人力"} 67 | {"id":100066,"name":"毛芳","age":19,"tel":"10598667928","sex":"男","job":"项目组长"} 68 | {"id":100067,"name":"田杰","age":53,"tel":"6253255933","sex":"女","job":"产品经理"} 69 | {"id":100068,"name":"谭芳","age":16,"tel":"6578505071","sex":"女","job":"项目组长"} 70 | {"id":100069,"name":"薛明","age":43,"tel":"7677352921","sex":"女","job":"前台"} 71 | {"id":100070,"name":"白强","age":47,"tel":"8274703141","sex":"男","job":"设计"} 72 | {"id":100071,"name":"冯军","age":19,"tel":"4048748850","sex":"女","job":"后端"} 73 | {"id":100072,"name":"龚洋","age":74,"tel":"7388253571","sex":"女","job":"项目组长"} 74 | {"id":100073,"name":"许勇","age":53,"tel":"13232704597","sex":"男","job":"项目组长"} 75 | {"id":100074,"name":"宋超","age":43,"tel":"6238103816","sex":"男","job":"项目组长"} 76 | {"id":100075,"name":"任霞","age":76,"tel":"8031871583","sex":"女","job":"前台"} 77 | {"id":100076,"name":"刘平","age":24,"tel":"11955800908","sex":"男","job":"人力"} 78 | {"id":100077,"name":"萧秀英","age":36,"tel":"6229712820","sex":"女","job":"前台"} 79 | {"id":100078,"name":"黄强","age":41,"tel":"11741534896","sex":"女","job":"产品经理"} 80 | {"id":100079,"name":"姚洋","age":50,"tel":"11600330625","sex":"男","job":"后端"} 81 | {"id":100080,"name":"常秀兰","age":77,"tel":"12797841530","sex":"男","job":"前端"} 82 | {"id":100081,"name":"杜桂英","age":34,"tel":"2852120731","sex":"男","job":"后端"} 83 | {"id":100082,"name":"宋敏","age":53,"tel":"10195584428","sex":"男","job":"产品经理"} 84 | {"id":100083,"name":"万刚","age":15,"tel":"10293435958","sex":"女","job":"人力"} 85 | {"id":100084,"name":"史艳","age":55,"tel":"7170835161","sex":"女","job":"前台"} 86 | {"id":100085,"name":"江静","age":47,"tel":"9504999902","sex":"男","job":"项目组长"} 87 | {"id":100086,"name":"康霞","age":73,"tel":"13168682780","sex":"女","job":"设计"} 88 | {"id":100087,"name":"朱丽","age":55,"tel":"9839783059","sex":"女","job":"设计"} 89 | {"id":100088,"name":"吴杰","age":80,"tel":"10626133086","sex":"男","job":"设计"} 90 | {"id":100089,"name":"潘勇","age":80,"tel":"12939849746","sex":"女","job":"产品经理"} 91 | {"id":100090,"name":"袁伟","age":37,"tel":"2533232344","sex":"女","job":"设计"} 92 | {"id":100091,"name":"萧霞","age":43,"tel":"8612584322","sex":"男","job":"后端"} 93 | {"id":100092,"name":"蒋静","age":79,"tel":"13520563630","sex":"男","job":"前端"} 94 | {"id":100093,"name":"陆娟","age":52,"tel":"3771756667","sex":"女","job":"设计"} 95 | {"id":100094,"name":"邱娜","age":78,"tel":"13716995032","sex":"女","job":"设计"} 96 | {"id":100095,"name":"苏磊","age":30,"tel":"13249777206","sex":"女","job":"前台"} 97 | {"id":100096,"name":"潘勇","age":78,"tel":"12981352690","sex":"男","job":"后端"} 98 | {"id":100097,"name":"程磊","age":85,"tel":"5172080027","sex":"男","job":"后端"} 99 | {"id":100098,"name":"胡平","age":18,"tel":"2569103808","sex":"男","job":"前台"} 100 | {"id":100099,"name":"韩桂英","age":45,"tel":"7678164077","sex":"女","job":"设计"} 101 | -------------------------------------------------------------------------------- /edit.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BECUZELUVE/vue_management/ade3f318293246d33120839bbc7489e989d03462/edit.gif -------------------------------------------------------------------------------- /remove.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BECUZELUVE/vue_management/ade3f318293246d33120839bbc7489e989d03462/remove.gif -------------------------------------------------------------------------------- /search.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BECUZELUVE/vue_management/ade3f318293246d33120839bbc7489e989d03462/search.gif -------------------------------------------------------------------------------- /server/app.js: -------------------------------------------------------------------------------- 1 | var url = require("url"); 2 | var formidable = require('formidable'); 3 | var express = require("express"); 4 | var app = express(); 5 | 6 | app.use(express.static("www")); 7 | 8 | var User = require("./models/User.js"); 9 | 10 | var mongoose = require("mongoose"); 11 | mongoose.Promise = global.Promise; 12 | mongoose.connect("mongodb://localhost/manager",{useMongoClient:true}) 13 | 14 | app.get("/users",function(req,res){ 15 | var query = url.parse(req.url,true).query 16 | var page = query.page; //页码 17 | var pagesize = query.pagesize; //每页数量 18 | var sortby = query.sortby; //排序条件 19 | var sortdirection = query.sortdirection; //正序倒序 1正序 -1倒序 20 | var keyword = query.keyword; 21 | var keywordArr = keyword.split(","); 22 | 23 | if(keywordArr.length > 1){//如果关键词超过两个，执行且逻辑查询 24 | var searchObj = { 25 | "name": keywordArr.map(item=> new RegExp(item,"g")), 26 | "tel": keywordArr.map(item=> new RegExp(item,"g")), 27 | "sex": keywordArr.map(item=> new RegExp(item,"g")), 28 | "job": keywordArr.map(item=> new RegExp(item,"g")) 29 | } 30 | }else{ 31 | var searchObj = { 32 | $or:[ 33 | {"name": keywordArr.map(item=> new RegExp(item,"g"))}, 34 | {"tel": keywordArr.map(item=> new RegExp(item,"g"))}, 35 | {"sex": keywordArr.map(item=> new RegExp(item,"g"))}, 36 | {"job": keywordArr.map(item=> new RegExp(item,"g"))} 37 | ] 38 | } 39 | 40 | } 41 | User.count(searchObj,function(err,count){ 42 | User.find(searchObj).sort({[sortby]:sortdirection}).skip(pagesize * (page-1)).limit(pagesize).exec(function(err,results){ 43 | res.json({count,results}) 44 | }) 45 | }) 46 | }) 47 | 48 | app.post("/users",function(req,res){ 49 | var form = new formidable.IncomingForm(); 50 | form.parse(req, function(err, data) { 51 | User.create(data, function() { 52 | res.send("ok"); 53 | }) 54 | }); 55 | 56 | }) 57 | 58 | app.delete("/users",function(req,res){ 59 | var id = req.query.id; 60 | User.remove({ "id": id }, function() { 61 | res.send("ok"); 62 | }) 63 | }) 64 | app.listen(3000); -------------------------------------------------------------------------------- /server/models/User.js: -------------------------------------------------------------------------------- 1 | var mongoose = require("mongoose"); 2 | module.exports = mongoose.model("User", { 3 | id: Number, 4 | name: String, 5 | age: Number, 6 | tel: String, 7 | sex: String, 8 | job: String 9 | }) -------------------------------------------------------------------------------- /server/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "server_side", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "express": "^4.16.3", 13 | "formidable": "^1.2.1", 14 | "mongoose": "^4.13.14" 15 | }, 16 | "devDependencies": { 17 | "mock.js": "^0.2.0", 18 | "mockjs": "^1.0.1-beta3" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /vue/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue_study", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "dev": "webpack-dev-server --content-base ./www --port 8080" 9 | }, 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "axios": "^0.18.0", 14 | "iview": "^3.0.0", 15 | "vue": "^2.5.16", 16 | "vue-axios": "^2.1.3", 17 | "vue-router": "^3.0.1", 18 | "vuex": "^3.0.1" 19 | }, 20 | "devDependencies": { 21 | "babel-core": "^6.26.3", 22 | "babel-loader": "^7.1.5", 23 | "babel-plugin-transform-object-rest-spread": "^6.26.0", 24 | "babel-preset-es2015": "^6.24.1", 25 | "css-loader": "^1.0.0", 26 | "style-loader": "^0.21.0", 27 | "stylus": "^0.54.5", 28 | "stylus-loader": "^3.0.2", 29 | "url-loader": "^1.0.1", 30 | "vue-loader": "^15.2.6", 31 | "vue-style-loader": "^4.1.1", 32 | "vue-template-compiler": "^2.5.17", 33 | "webpack": "^4.9.1", 34 | "webpack-cli": "^3.1.0" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /vue/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const {VueLoaderPlugin} = require('vue-loader'); 3 | 4 | module.exports = { 5 | entry: "./www/app/app.js", 6 | output : { 7 | path : path.resolve(__dirname, "www/dist"), 8 | filename : "all.js", 9 | publicPath:"/public" 10 | }, 11 | watch : true, 12 | mode : "development", 13 | module:{ 14 | rules : [ 15 | { 16 | test : /\.js$/, 17 | include: [ 18 | path.resolve(__dirname, "www/app") 19 | ], 20 | exclude: [ 21 | path.resolve(__dirname, "node_modules") 22 | ], 23 | loader : "babel-loader", 24 | options : { 25 | presets: ["es2015"], 26 | plugins: ["transform-object-rest-spread"] 27 | } 28 | }, 29 | { 30 | test: /\.vue$/, 31 | include: [ 32 | path.resolve(__dirname, "www/app") 33 | ], 34 | exclude: [ 35 | path.resolve(__dirname, "node_modules") 36 | ], 37 | loader: 'vue-loader', 38 | options :{ 39 | loaders : { 40 | stylus:'vue-style-loader!css-loader!stylus-loader' 41 | } 42 | } 43 | }, 44 | { 45 | test:/\.css$/, 46 | use: ['vue-style-loader','css-loader'] 47 | } 48 | ] 49 | }, 50 | resolve: { 51 | alias: { 52 | 'vue$': 'vue/dist/vue.esm.js' 53 | } 54 | }, 55 | plugins : [ 56 | new VueLoaderPlugin() 57 | ], 58 | devServer :{ 59 | proxy: { 60 | "/api": { 61 | target: "http://127.0.0.1:3000", 62 | pathRewrite: {"^/api" : "/"} 63 | } 64 | } 65 | } 66 | } -------------------------------------------------------------------------------- /vue/www/app/App.vue: -------------------------------------------------------------------------------- 1 | 17 | 25 | -------------------------------------------------------------------------------- /vue/www/app/app.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import App from "./App.vue"; 3 | import store from "./store/index.js"; 4 | import iView from 'iview'; 5 | 6 | Vue.use(iView); 7 | 8 | new Vue({ 9 | el:"#app", 10 | store, 11 | render:(h)=>h(App) 12 | }) -------------------------------------------------------------------------------- /vue/www/app/components/users/index.vue: -------------------------------------------------------------------------------- 1 | 41 | 183 | -------------------------------------------------------------------------------- /vue/www/app/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import Vuex from "vuex"; 3 | import createLogger from "vuex/dist/logger"; 4 | 5 | import usersState from "./users/state.js" 6 | import usersMutations from "./users/mutations.js" 7 | import usersActions from "./users/actions.js" 8 | 9 | Vue.use(Vuex); 10 | 11 | //全局数据 12 | const store = new Vuex.Store({ 13 | state : { 14 | usersState 15 | }, 16 | mutations:{ 17 | ...usersMutations 18 | }, 19 | actions:{ 20 | ...usersActions 21 | }, 22 | 23 | plugins:[createLogger()] 24 | }) 25 | 26 | export default store; -------------------------------------------------------------------------------- /vue/www/app/store/users/actions.js: -------------------------------------------------------------------------------- 1 | async function fetchData({usersState:{page,pagesize,sortby,sortdirection,keyword}}){ 2 | var {count,results} = await fetch(`/api/users?page=${page}&pagesize=${pagesize}&sortby=${sortby}&sortdirection=${sortdirection}&keyword=${keyword}`).then(data=>data.json()); 3 | 4 | return {count,results} 5 | } 6 | 7 | export default { 8 | //初始化 9 | async user_init({commit,state}){ 10 | const {count,results} = await fetchData(state); 11 | 12 | commit("changeUsersResults",{results}) 13 | commit("changeUsersCount",{count}) 14 | }, 15 | //页码 16 | async changeUsersPage({commit,state},{page}){ 17 | commit("changeUsersPage",{page}) 18 | 19 | const {count,results} = await fetchData(state); 20 | commit("changeUsersResults",{results}) 21 | commit("changeUsersCount",{count}) 22 | }, 23 | //页数量 24 | async changeUsersPageSize({commit,state},{pagesize}){ 25 | commit("changeUsersPage",{page:1}) 26 | commit("changeUsersPageSize",{pagesize}) 27 | 28 | const {count,results} = await fetchData(state); 29 | commit("changeUsersResults",{results}) 30 | commit("changeUsersCount",{count}) 31 | }, 32 | //排序 33 | async changeUsersSort({commit,state},{sortby,sortdirection}){ 34 | commit("changeUsersPage",{page:1}) 35 | commit("changeUsersSortby",{sortby}) 36 | commit("changeUsersSortdirection",{sortdirection}) 37 | 38 | const {count,results} = await fetchData(state); 39 | commit("changeUsersResults",{results}) 40 | commit("changeUsersCount",{count}) 41 | }, 42 | //关键词查询 43 | async changeUsersKeyword({commit,state},{keyword}){ 44 | commit("changeUsersPage",{page:1}) 45 | commit("changeUsersKeyword",{keyword}) 46 | 47 | const {count,results} = await fetchData(state); 48 | commit("changeUsersResults",{results}) 49 | commit("changeUsersCount",{count}) 50 | }, 51 | async ADD({commit,state},payload){ 52 | await fetch("/api/users",{ 53 | method: "POST", 54 | headers: {"Content-Type":"application/json"}, 55 | body: JSON.stringify(payload) 56 | }).then(data=>data); 57 | commit("ADD",payload); 58 | 59 | const {count,results} = await fetchData(state); 60 | commit("changeUsersResults",{results}) 61 | commit("changeUsersCount",{count}) 62 | }, 63 | async REMOVE({commit,state}, payload) { 64 | await fetch(`/api/users?id=${state.usersState.results[payload].id}`, { 65 | method: "DELETE" 66 | }).then(data => data); 67 | commit("REMOVE", payload); 68 | 69 | const {count,results} = await fetchData(state); 70 | commit("changeUsersResults",{results}) 71 | commit("changeUsersCount",{count}) 72 | }, 73 | } -------------------------------------------------------------------------------- /vue/www/app/store/users/mutations.js: -------------------------------------------------------------------------------- 1 | export default { 2 | //数据 3 | changeUsersResults(state,payload){ 4 | state.usersState.results = payload.results; 5 | }, 6 | //数据的总数 7 | changeUsersCount(state,payload){ 8 | state.usersState.count = payload.count; 9 | }, 10 | //页码 11 | changeUsersPage(state,payload){ 12 | state.usersState.page = payload.page; 13 | }, 14 | //页数量 15 | changeUsersPageSize(state,payload){ 16 | state.usersState.pagesize = payload.pagesize; 17 | }, 18 | //排序条件 19 | changeUsersSortby(state,payload){ 20 | state.usersState.sortby = payload.sortby; 21 | }, 22 | //正序倒序 23 | changeUsersSortdirection(state,payload){ 24 | state.usersState.sortdirection = payload.sortdirection; 25 | }, 26 | //关键词查询 27 | changeUsersKeyword(state,payload){ 28 | state.usersState.keyword = payload.keyword; 29 | }, 30 | ADD(state,payload){ 31 | state.usersState.results.push(payload); 32 | } 33 | , 34 | REMOVE(state,payload){ 35 | state.usersState.results.splice(payload,1); 36 | } 37 | } -------------------------------------------------------------------------------- /vue/www/app/store/users/state.js: -------------------------------------------------------------------------------- 1 | export default { 2 | page:1, 3 | pagesize:10, 4 | sortby :"id", 5 | sortdirection:1, 6 | keyword:"", 7 | results:[], 8 | count:0 9 | } -------------------------------------------------------------------------------- /vue/www/css/fonts/ionicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BECUZELUVE/vue_management/ade3f318293246d33120839bbc7489e989d03462/vue/www/css/fonts/ionicons.ttf -------------------------------------------------------------------------------- /vue/www/css/fonts/ionicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BECUZELUVE/vue_management/ade3f318293246d33120839bbc7489e989d03462/vue/www/css/fonts/ionicons.woff -------------------------------------------------------------------------------- /vue/www/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 人员管理系统 6 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | --------------------------------------------------------------------------------