Vue-cli和Koa2搭建自己的测试项目(初步练习)

vue

目录

一、 安装vue-cli脚手架(见vue-cli项目搭建文档); 2

二、 创建服务文件夹sever 2

三、 创建服务启动文件 2

四、 数据库sql语句及注意事项 4

4.1 介绍mysql中模糊查询的四种用法: 7

五、 使用async、await、promise时注意 9

六、 使用jsonwebtoken进行签发token和token的解密 9

6.1 (token加密) 9

6.2(token解密:utils.js文件) 10

6.3(调用token解密) 11

七、 使用md5进行加密 11

八、 对于增加、删除、修改的数据可以通过返回值‘affectedRows’来判断是否成功; 12

九、 备用 12

一、安装vue-cli脚手架(见vue-cli项目搭建文档);

二、创建服务文件夹sever

三、创建服务启动文件

.sever/config.js 文件

./sever/routers/router.js 文件

…/controller/port.js(注册、登录及记录控制文件)

…/controller/article.js(文章添加、修改、删除、查找控制文件)


四、数据库sql语句及注意事项

let mysql = require('mysql');

let config = require('../config.js')

let pool = mysql.createPool({

host : config.sqlBase.host,

user : config.sqlBase.user,

password : config.sqlBase.password,

database : config.sqlBase.database,

port : config.sqlBase.port

})

let query = (sql, val)=>{

return new Promise(( resolve, reject ) => {

pool.getConnection(( err, connection ) => {

if(err){

reject(err)

}else{

connection.query(sql, val, ( err, rows) => {

if(err){

reject(err)

}else{

resolve(rows)

}

})

}

connection.release()

})

})

}

//用户数据表

let users =

`create table if not exists users(

id INT NOT NULL AUTO_INCREMENT,

name VARCHAR(100) NOT NULL COMMENT '用户名',

pass VARCHAR(100) NOT NULL COMMENT '密码',

avator VARCHAR(100) NOT NULL COMMENT '头像',

moment VARCHAR(100) NOT NULL COMMENT '注册时间',

PRIMARY KEY ( id )

);`

//登录记录表

let loginLog = 

`create table if not exists loginLog(

id INT NOT NULL AUTO_INCREMENT,

name VARCHAR(100) NOT NULL COMMENT '用户名',

ip VARCHAR(100) NOT NULL COMMENT 'IP',

time VARCHAR(100) NOT NULL COMMENT '登录时间',

PRIMARY KEY ( id )

)`

//文章记录表

let articles = 

`create table if not exists articles(

id INT NOT NULL AUTO_INCREMENT,

userId INT NOT NULL COMMENT '用户ID',

userName CHAR(20) NOT NULL COMMENT '用户名',

avator VARCHAR(100) COMMENT '用户头像',

title VARCHAR(100) NOT NULL COMMENT '文章标题',

content TEXT(0) NOT NULL COMMENT '文章内容',

creatTime VARCHAR(100) NOT NULL COMMENT '创建时间',

modifyTime VARCHAR(100) NOT NULL COMMENT '修改时间',

ip VARCHAR(50) NOT NULL COMMENT 'IP',

views VARCHAR(100) NOT NULL COMMENT '浏览量',

comment VARCHAR(100) NOT NULL COMMENT '评论量',

PRIMARY KEY ( id )

)`

let createTable = ( sql ) => {

return query( sql, [] )

}

// 建表

createTable(users)

createTable(loginLog)

createTable(articles)

//====================== users 表 ==========================

//登录判断

exports.login = ( name, md5_Pwd )=>{

let _sql = `select * from users where name="${name}" and pass="${md5_Pwd}";`

return query( _sql );

}

// 注册用户

exports.insertData = ( value ) => {

let _sql = "insert into users set name=?,pass=?,moment=?;"

return query( _sql, value )

}

// 删除用户

exports.deleteUserData = ( id ) => {

let _sql = `delete from users where id="${id}";`

return query( _sql )

}

// 查找用户

exports.findUserData = ( name, pageSize, pageNo ) => {

let _sql = name ? `select * from users where name="${name}";` : `select id, name, moment from users limit ${(pageNo-1)*10}, ${pageSize};`

return query( _sql )

}

// 更新

exports.updatePost = (values) => {

let _sql = `update users set name=? where id=?;`

return query(_sql, values)

}

多条件查询


4.1 介绍mysql中模糊查询的四种用法:

1 %:表示任意0个或多个字符。可匹配任意类型和长度的字符,有些情况下若是中文,请使用两个百分号(%%)表示。

比如 SELECT * FROM [user] WHERE u_name LIKE ‘%三%’

将会把u_name为“张三”,“张猫三”、“三脚猫”,“唐三藏”等等有“三”的记录全找出来。

另外,如果需要找出u_name中既有“三”又有“猫”的记录,请使用and条件

SELECT * FROM [user] WHERE u_name LIKE ‘%三%’ AND u_name LIKE ‘%猫%’

若使用 SELECT * FROM [user] WHERE u_name LIKE ‘%三%猫%’

虽然能搜索出“三脚猫”,但不能搜索出符合条件的“张猫三”。

2 :表示任意单个字符。匹配单个任意字符,它常用来限制表达式的字符长度语句:

比如 SELECT * FROM [user] WHERE u_name LIKE ‘

只找出“唐三藏”这样u_name为三个字且中间一个字是“三”的;

再比如 SELECT * FROM [user] WHERE u_name LIKE '三_’; 只找出“三脚猫”这样name为三个字且第一个字是“三”的;

3 [ ]:表示括号内所列字符中的一个(类似正则表达式)。指定一个字符、字符串或范围,要求所匹配对象为它们中的任一个。

比如 SELECT * FROM [user] WHERE u_name LIKE ‘[张李王]三’ 将找出“张三”、“李三”、“王三”(而不是“张李王三”);

如 [ ] 内有一系列字符(01234、abcde之类的)则可略写为“0-4”、“a-e”

SELECT * FROM [user] WHERE u_name LIKE ‘老[1-9]’ 将找出“老1”、“老2”、……、“老9”;

4 [^ ] :表示不在括号所列之内的单个字符。其取值和 [] 相同,但它要求所匹配对象为指定字符以外的任一个字符。

比如 SELECT * FROM [user] WHERE u_name LIKE ‘[^张李王]三’ 将找出不姓“张”、“李”、“王”的“赵三”、“孙三”等;

SELECT * FROM [user] WHERE u_name LIKE ‘老[^1-4]’; 将排除“老1”到“老4”,寻找“老5”、“老6”、……

4.2使用多条件的sql语法注意:


注意values的时候值要用 [ ] 包起来;


这样的可以直接写,不用 [ ] 包起来;

五、使用async、await、promise时注意

六、使用jsonwebtoken进行签发token和token的解密

const jwt = require(‘jsonwebtoken’);


6.1 (token加密)

let IP = utils.getClientIP(ctx);				//获取用户的ip

//写入登录记录表中;

await userPort.loginLog([name, IP, moment().format('YYYY-MM-DD HH:mm:ss')]).then(loginRes=>{

console.log("登录记录====>>>>", loginRes)

})

const userToken = {

ip : IP,

id : result[0].id,

name : result[0].name,

originExp: Date.now() + 60 * 60 * 1000, // 设置过期时间(毫秒)为 1 小时

}

const secret = config.secret; // 指定**,这是之后用来判断 token 合法性的标志

const token = jwt.sign(userToken, secret); // 签发 token

ctx.body = {

code : 200,

success: true,

data : {

token : token,

userid : result[0].id,

name : result[0].name

},

message: '登录成功'

}

...

6.2(token解密:utils.js文件)

const jwt = require('jsonwebtoken');

const config = require('./config.js')

//解密token信息

exports.verifyToken = (ctx)=> {

const secret = config.secret; //公钥

//获取header中的token

let { loginedtoken } = ctx.request.header;

let result = {};

return new Promise((resolve, reject)=>{

try {

result = jwt.verify(loginedtoken, secret) || {};

let { originExp = 0 } = result, current = Math.floor(Date.now() / 1000);

if(current <= originExp) {

// result = result || {};

resolve(result)

}

console.log("loginedtoken=>", loginedtoken, "result=>", result);

} catch(err) {

console.log(err)

reject(err)

}

})

}

//公用:获取客户端IP

exports.getClientIP = (ctx)=> {

let req = ctx.request;

let ip = ctx.ip ||

req.headers['x-forwarded-for'] ||

req.ip ||

req.connection.remoteAddress ||

req.socket.remoteAddress ||

req.connection.socket.remoteAddress || '';

let arr = ip.match(/(\d{1,3}\.){3}\d{1,3}/);

return arr ? arr[0] : '';

}

6.3(调用token解密)

//校验token的正确性

await utils.verifyToken(ctx).then(async(res)=>{ //函数中有 await 时,必须要写入 async !!!!

if(res.id){

.........

}

}).catch(err=>{

ctx.body = {

code: 505,

message: "用户未登录"

}

});

七、使用md5进行加密
const md5 = require('md5');

八、对于增加、删除、修改的数据可以通过返回值‘affectedRows’来判断是否成功;

九、备用

以上是 Vue-cli和Koa2搭建自己的测试项目(初步练习) 的全部内容, 来源链接: utcz.com/z/375191.html

回到顶部