之前写了一个vue初始化项目，搭建了一个vuex后台管理项目架子，这个structure-admin-web的功能下，forstructure-补充了admin-web的不足，开发了一个带登录的structure-admin项目。技术站：主要是node+vue+redis+mysql+es6欢迎来到structure-admin源码：structure-admin同步更新为sau通讯学习社区：https://www.mwcxs.top/page/42...下一篇：1.后端服务nodejs,thinjsredis配置,数据库操作2.前端vue+vuex全局路由守卫,axios请求拦截31.项目启动必读1.后端服务nodejs,thinjsredis配置,和数据库操作。我使用thinkjs3，一个nodejs框架。1、首先介绍一下登录控制逻辑：(1)如果已经登录过，则根据路由直接跳转到相应页面；(2)如果已经登录，则不能跳转到登录页面，而是进入首页；(3)如果还没有登录，输入url一定要跳转到登录页面；(4)如果退出系统，必须返回登录页面，status为redis配置文件adapter.jsexports.session={type:'redis',common:{cookie:{name:'thinkjs',keys:['werwer','werwer'],signed:true}},redis:{handle:redisSession,host:'127.0.0.1',port:6379,password:'a123456'}};设置redis服务地址主机，端口，以及redis密码，redis的搭建和配置，参考window下redis的安装，redis可视化管理工具（RedisDesktopManager）安装，基本使用，实例化项目一文。1.2前端每次请求路由，都会去redis服务器获取userInfo信息。如果为空，则返回的前端数据为空。前端在路由过滤器中，跳转到登录页面，有值则正常返回。async__before(){letuser=awaitthis.session("userInfo");如果（用户）{this.user=user;}else{this.user='';这是在nodejs的controller控制器中，前端每次向后端发送请求，都会去redis中获取userInfo的值，让user=awaitthis.session("userInfo");向redis服务添加个人信息1.3登录成功后向redis服务添加个人信息asyncloginAction(){let{username,password}=this.post();try{letuser=awaitthis.model('user').where({用户名,}).find();if(user.password&&user.password==password){//登录成功awaitthis.session('userInfo',{username,userId:user.id});returnthis.success("登录成功");}else{returnthis.fail("用户名或密码错误")}}catch(e){console.log(e);returnthis.fail("登录失败")}这是往redis中添加个人信息awaitthis.session('userInfo',{username,userId:user.id});WEB请求经常使用session来维护会话，框架使用think-session和Adapter支持session功能2.引入注销(exit)控制asynclogoutAction(){try{awaitthis.session(null);returnthis.success("注销成功");}catch(e){返回这个。fail(`Logoutfailed${e}`)}}这个是前端发送的注销请求，直接清空redis，根据前端路由跳转到登录页面。此时redis服务中没有值，所以不会会跳转到其他页面3.数据库配置adapter.jsexports.model={type:'mysql',common:{logConnect:true,logSql:true,logger:msg=>think.logger.info(msg)},mysql:{handle:mysql,database:'example',prefix:'example_',encoding:'utf8',host:'127.0.0.1',端口:'3306',用户:'root',密码:'123456',dateStrings:true}};常用的部分是配置是否打印出sql语句的运行日志，方便我们在开发中调试修改bug。手动拼出SQL语句非常麻烦，同时还要注意SQL注入等安全问题。对于这个框架，提供了模型函数来方便数据库的操作。Mysql的Adapter是think-model-mysql，底层是基于mysql库实现的。它使用连接池连接数据库，默认连接数为1。以登录界面为例：this.model表示使用的是打包模型，find是查找单条数据.在user这个表中，username的值就是前端发来的username的值，返回值赋值给用户。asyncloginAction(){让{username,password}=this.post();try{letuser=awaitthis.model('user').where({username,}).find();if(user.password&&user.password==password){//登录成功awaitthis.session('userInfo',{username,userId:user.id});returnthis.success("登录成功");}else{返回这个。fail("用户名或密码错误")}}catch(e){console.log(e);returnthis.fail("登录失败")}think.Model基类提供了丰富的CRUD操作方法，下面我们一一介绍。查询数据模型提供了多种查询数据的方法，例如：find查询单条数据select查询多条数据count查询总数count选择分页查询数据max查询字段的最大值avg查询字段的平均值min查询字段的最小值sum求和字段值getField查询指定字段的值同时，模型支持在SQL语句中通过以下指定具体条件方法，如：where指定SQL语句中的where条件limit/page指定SQL语句中的limitfield/fieldReverse指定SQL语句中的fieldorderSQL语句中指定ordergroupSQL语句中指定groupjoinSQL语句中指定joinunion在SQL语句中指定unionhaving的SQL语句在SQL语句中指定havingcache的SQL语句设置查询缓存添加数据模型提供了以下添加数据的方法：add添加单条数据thenAdd当where条件不存在时添加AddMany添加多条数据selectAdd添加一个子查询的结果数据Update数据模型提供了以下更新数据的方法：数据模型提供了以下删除数据的方法：delete删除数据以项目代码为例：(1)查询单条数据，使用find()，条件为：用户号(usernum)为180909，用户名（username）为saucxs，时间（time）填写为本周时间范围的时间戳，返回对象为objectletweekly=awaitthis.model('week').where({usernum:'180909', username:'saucxs', time:{'>':startWeekStamp,'<':endWeekStamp}}).find();解读：model('week')的含义，获取的是week数据表（2）查询多条数据，使用select()，条件：公司id（company_id）为data的数据，其中返回数组arrayletdepartment=awaitthis.model('department').where({company_id:'data'}).select();(3)查询表中具体列数据，使用field()departmentMemberList=awaitthis.model('user').field('id,company_id,company_name,department_id,department_name,email,role,role_name,username,usernum,telephone').where({company_id:this.user.company_id,role:{'>=':this.user.role}}).find();解释：this.user.company_id取登录用户的公司id，{'>=':this.user.role}为登录用户的角色（4）分页查询，使用page(page,pagesize)和countSelect()，返回的数据是对象departmentMemberList=awaitthis.model('user').field('id,company_id,company_name,department_id,department_name,email,role,role_name,username,usernum,telephone').where({company_id:this.user.company_id,role:{'>=':this.user.role}}).order("department_idasc,roleasc").页面（页面，页面大小）.countSelect();解释：返回的对象，如下图所示：（count为项目总数，currentPage为当前页，data为数据数组，pageSize为每页显示多少个项目，totalPages为总计页数）(5)排序，倒序（desc)和正序(asc)，使用order("parameter1asc,parameter2desc")departmentMemberList=awaitthis.model('user').field('id,company_id,company_name,department_id,department_name,email,role,role_name,username,usernum,telephone').where({company_id:this.user.company_id,role:{'>=':this.user.role}}).order("department_idasc,roleasc").page（页面，页面大小）.countSelect();(6)删除，使用delete()，条件使用whereawaitthis.model('department').where({company_id,department_id}).delete();(7)添加，使用add()，nowhereawaitthis.model('department').add({company_id:this.user.company_id,company_name:this.user.company_name,department_id,department_name});(8)改变，使用update(),conditionwhereawaitthis.model('user').where({id}).update({usernum,username,telephone,role,role_name,email,company_id,company_name,department_id,部门名称}）;手动执行SQL语句模型打包的方式有时不能满足所有情况。这时候就需要手动指定SQL语句，可以通过以下方法来完成：query手写SQL语句queryexecute手写SQL语句执行可以参考thinkJS官方文档数据操作部分：https://thinkjs.org/zh-cn/doc...2.前端vue+vuex全局路由守卫，axios请求拦截只是简单的说了Take看一下nodejs后端启动的服务和封装的接口，前端调用这个接口使用的url是：模块名/控制器名/方法名，这个方法可以在配置文件中修改1.全局路由guard全局路由守卫会在每次登录后判断是否登录（即判断redis服务中是否有值）（后台返回的用户权限信息），然后判断当前路由到被重定向，用户是否有权限访问，可以考虑用户登录后，通过路由过滤用户权限，生成菜单，菜单保存在vuex中。/*路由处理*/router.beforeEach((to,from,next)=>{letmenuId;letauditResult;letapplicationVerifyFlag;letkey=to.meta.key;if(key){store.dispatch("getUserInfo",{}).then(response=>{if(!response.data){if(to.path!=='/login'){returnnext('/login');}next();}else{if(to.path=='/login'){returnnext('/writeWeekly');}store.commit("USER_INFO",response.data);next();}});}else{next();}});根据这个key判断是否有权限，得到路由中metakey的值。路线：[{路径：'/登录'，名称：'登录'，元：{键：'0'}，组件：登录}，{路径：'/'，名称：'家'，组件：家，孩子:[{path:'/writeWeekly',name:'writeWeekly',meta:{key:'1'},component:writeWeekly}]}]2.axios请求拦截统一处理所有的http请求和响应，通过配置http请求拦截器在http头部添加一个Authorization字段，其内容为Token。通过配置http响应拦截器，当后端接口返回401Unauthorized（未授权）时，允许用户重新登录。//开发环境调试用户信息axios.interceptors.request.use(config=>{if(process.env.NODE_ENV==='development'){config.headers["username"]="189090909";}returnconfig;});axios.interceptors.response.use(response=>{letdata=response.data;console.log(data,'data');if(!data.data){//登录成功的回调地址returndata;}else{returndata;}},error=>({code:-1,msg:"网络异常"}));封装所有请求。//获取请求配置brackets'})},timeout:5000}//post请求配置letpostConfig={url:'',baseURL:serveUrl,headers:{'Content-Type':'application/json','X-Requested-With':'XMLHttpRequest'},transformRequest:[function(data){returnJSON.stringify(data.params||{})}],timeout:5000}export{serveUrl,getConfig,postConfig,}3.项目启动必读1、首先你的环境是nodejs，不会安装配置参考：http://www.mwcxs.top/page/420...2、克隆下来项目gitclonehttps://github.com/saucxs/结构管理.git3。前端vue的structure-admin-web文件夹和node后端的structure-admin-node，安装依赖npminstall4。安装redis（可以考虑安装RedisDesktopManager）参考：window下安装redis、redis可视化管理工具（RedisDesktopManager）安装、基本使用、实例化项目5.安装mysql，这个不再赘述6.修改适配器配置文件nodejs的adapter.jsexports.cac这两个文件中的.js和config.jshe={type:'redis',common:{timeout:24*60*60*1000//毫秒},redis:{handle:redisCache,host:'127.0.0.1',port:6379,password:'a123456'//redis安装时设置的秘密}};////exports.model={type:'mysql',common:{logConnect:true,logSql:true,logger:msg=>think.logger.info(msg)},mysql:{handle:mysql,database:'weekly',prefix:'week_',encoding:'utf8',host:'127.0.0.1',//本地数据库端口:'3306', //数据库portuser:'root',//数据库用户名password:'123456',//数据库用户名密码dateStrings:true}};7、分别启动前后端分离的项目（1）前端vue启动structure-admin-webnpmrundev(2)和node后端structure-admin-nodestartnpmstart8，这样就可以启动了（1）登陆页面（2）写周报页面structure-admin架子在线地址：http://structure_admin.mwcxs.top测试账号：test，密码：1234569，PC端搭建在这个架子上的周报企业管理系统方，欢迎访问：http://weekly.mwcxs.top，（公司负责人）帐号：testadmin，密码：123456（部门经理）帐号：test，密码：123456（会员）帐号：teststaff，密码：123456
