vue,vuex的后台管理项目架子structure-admin,后端服务nodejs
之前写过一篇vue初始化项目,构建vuex的后台管理项目架子,这个structure-admin-web所拥有的功能
接下来,针对structure-admin-web的不足,进行了补充,开发了具有登陆的structure-admin项目,技术站:主要是node+vue+redis+mysql+es6
欢迎访问structure-admin源码:structure-admin
欢迎访问weekly源码:weekly
项目地址演示地址:http://weekly.mwcxs.top
- (公司负责人)账号:testadmin,密码:123456
- (部门经理)账号:test,密码:123456
- (成员)账号:teststaff,密码:123456
PS:添加的成员的默认密码是123456
接下来:
一、后端服务nodejs,thinjs的redis配置,操作数据库
二、前端vue+vuex全局路由守卫,axios请求拦截
三、项目启动必读
一、后端服务nodejs,thinjs的redis配置,操作数据库
我使用的是thinkjs,一个nodejs的框架。
1、首先介绍登陆的控制
逻辑:
(1)已经登陆的,直接根据的路由跳到相应页面;
(2)已经登陆的,不能跳到登陆页面,跳到首页;
(3)没有登陆的,输入url必须跳到登陆页;
(4)退出系统的,必须回到登陆页,状态是未登录
1.1 thinkjs的redis的配置文件adapter.js
exports.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的服务地址host,端口,以及redis的密码,redis的搭建和配置,参考安装window下的redis,redis可视化管理工具(Redis Desktop Manager)安装,基础使用,实例化项目这篇文章。
1.2 在每一次前端请求的路由的时候,都会去redis服务器中去取userInfo的信息
如果为空,返回前端data为空,前端在路由过滤中,跳到登陆页,如果有值就正常返回。
async __before() {
let user = await this.session("userInfo");
if(user) {
this.user = user;
} else {
this.user = '';
}
}
这个在nodejs的控制器controller里,在每一次前端的请求发送到后端的时候,都会去redis的取userInfo的值,
let user = await this.session("userInfo");
这个userInfo的值也是自己在登陆的时候,把登陆成功之后的个人信息加入到redis服务中
1.3 在登陆成功的时候讲个人信息加到redis服务中
async loginAction() {
let {username, password} = this.post();try {
let user = await this.model('user').where({
username,
}).find();
if(user.password && user.password == password) {
// login success
await this.session('userInfo',{username, userId:user.id});
return this.success("登陆成功");
} else {
return this.fail("用户名或密码错误")
}
}
catch(e) {
console.log(e);
return this.fail("登录失败")
}
这个就是将个人信息加入到redis中
await this.session('userInfo',{username, userId:user.id});
WEB 请求中经常通过 session 来维持会话的,框架通过 think-session 和 Adapter 来支持 session 功能。
2、介绍登出(退出)的控制
async logoutAction() {
try {
await this.session(null);
return this.success("登出成功");
} catch(e) {
return this.fail(`登出失败${e}`)
}
}
这个就是前端发的请求登出,直接将redis的置空,根据前端路由跳转到登陆页,这时候redis的服务中没有值,就不会跳转到其他页面
3、数据库的配置adapter.js
exports.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',
port: '3306',
user: 'root',
password: '123456',
dateStrings: true
}
};
common部分是配置是否将sql的语句的操作日志打出来,这样便于我们在开发的时候的调试和修改bug
4、操作数据库
项目开发中,经常需要操作数据库(如:增删改查等功能),手工拼写 SQL 语句非常麻烦,同时还要注意 SQL 注入等安全问题。为此框架提供了模型功能,方便操作数据库。
Mysql 的 Adapter 为 think-model-mysql,底层基于 mysql 库实现,使用连接池的方式连接数据库,默认连接数为 1。
拿登陆的接口来说明:this.model说明使用封装好的model,find是查找单条数据,在user的这张表中查找username值为前端传来的username的值,返回的值赋给user中。
async loginAction() {
let {username, password} = this.post();
try {
let user = await this.model('user').where({
username,
}).find();
if(user.password && user.password == password) {
// login success
await this.session('userInfo',{username, userId:user.id});
return this.success("登陆成功");
} else {
return this.fail("用户名或密码错误")
}
}
catch(e) {
console.log(e);
return this.fail("登录失败")
}
think.Model
基类提供了丰富的方法进行 CRUD 操作,下面来一一介绍。
查询数据
模型提供了多种方法来查询数据,如:
- find 查询单条数据
- select 查询多条数据
- count 查询总条数
- countSelect 分页查询数据
- max 查询字段的最大值
- avg 查询字段的平均值
- min 查询字段的最小值
- sum 对字段值进行求和
- getField 查询指定字段的值
同时模型支持通过下面的方法指定 SQL 语句中的特定条件,如:
- where 指定 SQL 语句中的 where 条件
- limit / page 指定 SQL 语句中的 limit
- field / fieldReverse 指定 SQL 语句中的 field
- order 指定 SQL 语句中的 order
- group 指定 SQL 语句中的 group
- join 指定 SQL 语句中的 join
- union 指定 SQL 语句中的 union
- having 指定 SQL 语句中的 having
- cache 设置查询缓存
添加数据
模型提供了下列的方法来添加数据:
更新数据
模型提供了下列的方法来更新数据:
- update 更新单条数据
- updateMany 更新多条数据
- thenUpdate 条件式更新
- increment 字段增加值
- decrement 字段减少值
删除数据
模型提供了下列的方法来删除数据:
- delete 删除数据
用项目的代码举栗子:
(1)查询单条数据,用find(),条件为:工号(usernum)为180909,用户名(username)为saucxs ,并且填写时间(time)为这周的时间范围的时间戳,返回的是对象object
let weekly = await this.model('week').where({
usernum: '180909',
username: 'saucxs',
time: {'>': startWeekStamp, '<': endWeekStamp}
}).find();
解读:model('week')的意思,取得是week的数据表
(2)查询多条数据,用select(),条件:公司id(company_id)为data的数据,返回的是数组array
let department = await this.model('department').where({company_id: 'data'}).select();
(3)查询表中的具体的列数据,用field()
departmentMemberList = await this.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 = await this.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_id asc , role asc").page(page, pagesize).countSelect();
解读:返回的对象,如下图所示:(count是总条数,currentPage为当前页,data是数据的数组,pageSize为每一页展示几条,totalPages为总共有多少页)
(5)排序,倒序(desc)和正序(asc),用order("参数1 asc,参数2 desc”)
departmentMemberList = await this.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_id asc , role asc").page(page, pagesize).countSelect();
(6)删除,用delete(),条件用where
await this.model('department').where({company_id, department_id}).delete();
(7)新增,用add(),没有where
await this.model('department').add({
company_id: this.user.company_id, company_name: this.user.company_name, department_id, department_name
});
(8)改,用update(),条件where
await this.model('user').where({id}).update({
usernum, username, telephone, role, role_name,email, company_id, company_name, department_id, department_name
});
手动执行 SQL 语句
有时候模型包装的方法不能满足所有的情况,这时候需要手工指定 SQL 语句,可以通过下面的方法进行:
具体的可以参考thinkJS的官方文档的数据操作这块:https://thinkjs.org/zh-cn/doc/3.0/relation_model.html
二、前端vue+vuex全局路由守卫,axios请求拦截
刚才简单的说了一下nodejs的后端启动的服务,封装的接口,而前端调用这个接口使用的是url是:模块名/控制器名/方法名,这个可以在配置文件中修改定义的方法
1、全局路由守卫
全局路由守卫是每一次都会判断是否登陆(也就是判断redis服务中是否有值)。已经登陆(后端返回的用户权限信息),则判断当前要跳转的路由,用户是否有权限访问,可以考虑在用户登陆之后将用户权限把路由过滤一遍生成菜单,菜单保存到vuex中。
/*路由处理*/
router.beforeEach((to, from, next) => {
let menuId;
let auditResult;
let applicationVerifyFlag;
let key = to.meta.key;
if (key) {
store.dispatch("getUserInfo", {}).then(response => {if(!response.data){
if (to.path !== '/login') {
return next('/login');
}
next();
}else{
if (to.path == '/login') {
return next('/writeWeekly');
}
store.commit("USER_INFO", response.data);
next();
}
});
} else {
next();
}
});
根据这个key来判断是否有权限,取得是路由中meta的key的值。
routes: [
{
path: '/login',
name: 'login',
meta: {
key: '0'
},
component: login
},
{
path: '/',
name: 'home',
component: home,
children: [{
path: '/writeWeekly',
name: 'writeWeekly',
meta: {
key: '1'
},
component: writeWeekly
}]
}
]
2、axios请求拦截
统一处理所有的http请求和响应的,通过配置http request interceptors为http头部增加Authorization字段,其内容为Token,通过配置http response interceptors
,当后端接口返回401 Unauthorized(未授权)
,让用户重新登录。
// 开发环境调试用户信息
axios.interceptors.request.use(config => {
if (process.env.NODE_ENV === 'development') {
config.headers["username"] = "189090909";
}
return config;
}); axios.interceptors.response.use(
response => {
let data = response.data;
console.log(data, 'data');
if (!data.data) {
// 登陆成功的回调地址
return data;
} else {
return data;
}
},
error => ({
code: -1,
msg: "网络异常"
})
);
对所有的请求进行了封装。
// get请求配置
let getConfig = {
url: '',
baseURL: serveUrl,
headers: {
'X-Requested-With': 'XMLHttpRequest'
},
paramsSerializer(params) {
return Qs.stringify(params, {
arrayFormat: 'brackets'
})
},
timeout: 5000
} // post请求配置
let postConfig = {
url: '',
baseURL: serveUrl,
headers: {
'Content-Type': 'application/json',
'X-Requested-With': 'XMLHttpRequest'
},
transformRequest: [function (data) {
return JSON.stringify(data.params || {})
}],
timeout: 5000
} export {
serveUrl,
getConfig,
postConfig,
}
三、项目启动必读
1、首先你的环境是nodejs,不会安装配置参考:http://www.mwcxs.top/page/420.html
2、clone下来项目
git clone https://github.com/saucxs/structure-admin.git
3、分别针对前端vue的structure-admin-web的文件夹和node后端structure-admin-node,安装相应依赖
npm install
4、安装redis(可以考虑安装RedisDesktopManager)
参考:安装window下的redis,redis可视化管理工具(Redis Desktop Manager)安装,基础使用,实例化项目
5、安装mysql,这个就不赘述
6、修改nodejs的后端的配置文件adapter.js,config.js这两个文件中
adapter.js
exports.cache = {
type: 'redis',
common: {
timeout: 24 * 60 * 60 * 1000 // millisecond
},
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', //本地数据库
port: '3306', //数据库端口
user: 'root', //数据库的用户名
password: '123456', //数据库该用户名的密码
dateStrings: true
}
};
7、分别对前后端分离的项目启动
(1)前端vue的structure-admin-web的启动
npm run dev
(2)和node后端structure-admin-node的启动
npm start
8、这样就可以启动
(1)登陆页
(2)写周报页面
9、该项目架子搭的周报企业管理系统
在PC端,欢迎访问:http://weekly.mwcxs.top,
- (公司负责人)账号:testadmin,密码:123456
- (部门经理)账号:test,密码:123456
- (成员)账号:teststaff,密码:123456
vue,vuex的后台管理项目架子structure-admin,后端服务nodejs的更多相关文章
- vue初始化项目,构建vuex的后台管理项目架子
构架vuex的后台管理项目源码:https://github.com/saucxs/structure-admin-web 一.node安装 可以参考这篇文章http://www.mwcxs.top/ ...
- 写了一个vue+antdv的后台管理模板
1,项目简介 写在前面===>这是一个vue+antdv的后台管理模板 项目地址: https://github.com/BaiFangZi/vue-antd-manage 1.1,概述 最 ...
- SSM 电影后台管理项目
SSM 电影后台管理项目 概述 通过对数据库中一张表的CRUD,将相应的操作结果渲染到页面上. 笔者通过这篇博客还原了项目(当然有一些隐藏的坑),然后将该项目上传到了Github.Gitee,在末尾会 ...
- vue vuex vue-rouert后台项目——权限路由(超详细简单版)
项目地址:vue-simple-template共三个角色:adan barbara carrie 密码全是:123456 adan 拥有 最高权限A 他可以看到 red , yellow 和 blu ...
- docloud后台管理项目(开篇)
最近朋友做app需要web做后台管理,所以花了一周时间做了这个项目. 废话不多说,开发环境是nginx+php5.3,使用thinkphp框架.是一个医疗器械数据统计的后台,业务功能很简单就是查看用户 ...
- vue+element搭建后台管理界面(支持table条件搜索)
代码地址(如果有帮助,请点个Star) vue:https://github.com/wwt729/ElementUIAdmin-master.git springboot后端:https://git ...
- 【vue】MongoDB+Nodejs+express+Vue后台管理项目Demo
¶项目分析 一个完整的网站服务架构,包括: 1.web frame ---这里应用express框架 2.web server ---这里应用nodejs 3.Database ---这里 ...
- 项目:Vue+node+后台管理项目小结
序:本文主要分两块说:项目机制,具体用到的知识块. 1. 项目机制 项目的原型以vue-cli为原型,进行项目的初步构建.项目以node.js服务和webpack打包机制为依托,将.vue文件打包为浏 ...
- vue+elementui搭建后台管理界面(7 vuex和mockjs的使用)
将权限管理应用到系统,首先做好登录, 点击登录按钮后,触发以下动作 vuex 中的 login 动作,设置 cookie vuex 中的 getuserinfo , 获取权限.用户名.头像等 由于目前 ...
随机推荐
- Asp.Net Core NLog 将日志输出到数据库以及添加LayoutRenderer的支持
在这之前打算用Apache的Log4Net,但是发现其AdoNetAppender方法已经不存在了,无法使用配置文件直接输出到数据库了,因此我便改用了NLog框架. 一.对项目添加NLog 通过Nug ...
- mock打桩之EasyMock
TDD是测试驱动开发(Test-Driven Development)的英文简称,是敏捷开发中的一项核心实践和技术,也是一种设计方法论.TDD的原理是在开发功能代码之前,先编写单元测试用例代码,测试代 ...
- laravel 5.4中手动创建分页
这里是参考的的链接https://blog.csdn.net/hxx_yang/article/details/51753134 use Illuminate\Pagination\LengthAwa ...
- 旅行app(游记、攻略、私人定制) | 顺便游旅行H5移动端实例
<顺便游旅行>是一款H5移动端旅行app,提供目的地(国内.国外.周边)搜索.旅游攻略查询.游记分享.私人定制4大模块,类似携程.同程.去哪儿.马蜂窝移动端,只不过顺便游app界面更为简洁 ...
- selenium IDE 使用方法整理
1.设置起始点(确定case从哪步开始执行),快捷键:S,效果图如下: 2.设置断点(case执行到添加断点处,将自动停止),快捷键:B,效果图如下: 3.设置判断点 如:百度输入ceshi,点 ...
- html select 标签设置默认选中
方法有两种. 第一种通过<select>的属性来设置选中项,此方法可以在动态语言如php在后台根据需要控制输出结果. 1 2 3 4 5 < select id = " ...
- 神奇的Scala Macro之旅(二)- 一个实例
优化的日志方式 package macros_demo import scala.language.experimental.macrosimport org.slf4j._import scala. ...
- knowledge, Experience & Creativity
In a training session, the trainer asked the audience "knowledge is power, how many of you agre ...
- 一份完整的阿里云 Redis 开发规范,值得收藏!
来源:yq.aliyun.com/articles/531067 作者:付磊-起扬 本文主要介绍在使用阿里云Redis的开发规范,从下面几个方面进行说明. 键值设计 命令使用 客户端使用 相关工具 通 ...
- 带着新人看java虚拟机06(多线程篇)
其实多线程还有很多的东西要说,我们慢慢来,可能会有一些东西没说到,那就没办法了,只能说尽量吧! 1.synchronized关键字 说到多线程肯定离不开这个关键字,为什么呢?因为多线程之间虽然有各自的 ...