首先介绍后端的操作:
在后台进行操作时,需要提前写好评两个模块;
1. 首先进行连接mySql数据库的处理(dbMsql.js文件)
//引入mySql包
const mysql = require('mysql');
//创建mysql连接:
let mysqlObj = mysql.createConnention({
host: 'localhost',
port: 3306,
user: 'root',
password: 'root',
database: 'xiaou'
});
//连接mysql数据库
mysqlObj.connect();
function execSql(sql){
return new Promise((resolved,rejected)=>{
mysqlObj.query(sql,(err,result)=>{
if(err){
//失败
resolved([false,'sql执行失败,请重试']);
}else{
//成功
resolved([true,result]); //这里的result是一个数组对象,[]
}
});
});
}
//暴露execSql方法
mosule.exports = execSql;
2.接收返回的数据
//接口返回的数据 整个项目公共的属性 单个暴露的方法
exports.Msg = function (status, msg, data = []) {
//data表示数据,是一个数组对象
return data.length > 0 ? { status, msg, data } : { status, msg };
}
//图片路径
module.exports.imgHost = 'http://localhost:3000/';
//生成JWT数据
// jwt.sign(自定义数据,密钥,{选项})
// expiresIn: 数据存储时间
// uid:已登陆的用户id
//username:已登陆的用户名
let curKeys = 'qweiotriqu1'; //密钥
module.exports.createJWT = function (uid,username) {
return jwt.sign({ uid, username }, curKeys, { expiresIn: 60 * 60 * 2 });
}
3.最后写后端接口,这里以首页轮播图接口为例
//首页轮播图接口
router.get('/banners',async(req,res)=>{
//查询轮播图数据
let sql = `select id,concat('${imgHost}',image_src)as image_src,title from e_banners where isshow='1'`;
//接收查询的数据,返回给前端 dbMsql.js文件进行处理,成功之后返回的是一个数组
//成功 resolved([true,result]);下面的arr对应的是result数组,里面是一个数组对象,
//也就是上面步骤二里面的
let [err,arr] = await execSql(sql);
if(err){
res.send(Msg(200,'轮播图查询成功',arr));//这里返回的是一个对象{status,msg,data},data对应exexMsql上面的result数组
}else{
res.send(Msg(500,'轮播图查询失败'));
}
});
二.前端的处理
1.首先在common.js文件内定义一个函数用来发送AJAX请求
//定义函数
function sendAjax(url,type = 'get', data = {},
dataType = 'json'){
url = `http://127.0.0.1:3000${url}`;
//这里的data是参数,不传参就为空
return new Promise((resolved,rejected)=>{
$.ajax({
url,
type,
data,
dataType,
success:function(d){
resulve([true,d]); //这里的e是上面返回的数组对象{status,msg,data }
},
err:function(e){
resolved([false,e]);
}
});
});
}
2.在前端调用首页轮播图接口,并渲染数据
async function getBanner(){
//接收上面步骤一发回的参数
// resulve([true,d]); 这时首页轮播图后台返回的数据
let [err, obj] = await sendAjax('/banner');
if(err){
let arr = obj.data;//轮播图数据
let str = '';
let num = 0 ;
for (let obj of arr) {
if (num == 0) {
str += `<li class="active" ><img src="${obj.image_src}" alt="">
</li>`;
} else {
str += `<li><img src="${obj.image_src}" alt=""></li>`;
}
num++;
//将轮播图数据渲染到页面上
$('.img').html(str);
}
}else{
console.log('轮播图调用失败');
}
}
getBanner();