Vue内容管理系统的搭建（三）
一定要相信越努力越幸运
文/ziven先生
标题图片/来自 IM free网站
很抱歉好久没有把系列文章及时的更下去，隔了好久才更第三篇文章，这中间拖拖拉拉发生了一些事，没有时间把要做的做下去，说来也挺沮丧的，简单的事情都没有坚持。还是那句老话，没有坚持哪有梦想，又不是富二代，官二代,你说是吧？
关于该系列文章，将按照从简到难地记录开发过程与遇到的问题，在过程中按照一个个小模块进行细分，其中如果某个模块遇到一个知识点，将在系列文章外的文章记录博主关于该知识点的学习与想法，并且在系列文章内附上链接。
前两篇做到前端登入页面和后端express的搭建。登录之后就进入主界面了。在开发主界面前，必须要知道主要界面的需求是啥，有了需求后，怎么布局主界面。当然也可以先想好主界面怎么布局，再统计下需求是什么。
关于视觉设计方面，一来这是个管理系统，视觉上的体验要求其实并不是那么高，二来由于时间关系，将在系列文章后面记录该内容，当然正规上线的项目是需要把设计做好才进行开发的。
按照博主的需求，要管理系统管理的网站主要有两个模块需要进行管理，一个是反馈页面的反馈信息进行管理，一个是全景图页面的管理，所谓管理就是要增删改查，图片要可以上传等等。
除此之外管理系统，要有使用该管理系统的用户管理，所以，管理系统还需要用户管理模块，分为权限管理，用户查询，个性设置等等
总结起来就是反馈管理，全景图管理，和用户管理三个模块。从反馈管理最简单开始，它主要涉及到table的查询与增删改查，反馈信息表，主要有反馈的时间，反馈人的姓名，反馈的信息等，管理主要是删除管理信息，时间和关键字来查询反馈信息。这样思路就有了。
主页面布局
element-ui 导航栏的小问题
在开发过程中遇到一个问题,因为之前开发经验里，element ui 导航栏通过index 来进行路由跳转的，不需要另外进行手动编写代码来启动这个跳转，然而这次开发过程，设置好index后，发现跳转无效，路由没有发生变化，前前后后黏贴官方代码也同样如此，于是根据官方文档，我在el-ment 标签添加router属性并且设置为false（虽然文档说默认是false），奇迹出现了，路由实现了跳转，不过浏览器出现如下的警告性错误，字面意思就是router这个属性获取的不是boolean类型，这个问题我现在也不知道如何修正，如果有谁知道可以在评论里告诉博主。
el-ment 标签添加router='false'或者router=false的警告性错误
我暂时把它当做一个现象吧，当然可能时间版本更换有所不同，elementUI处理机制不同，而我不知道。解决上述不跳转的现象，需要另辟方法，那就是通过绑定事件，手动写方法，获取index 来跳转。
使用flex布局
之前说了，侧边栏和显示栏是两栏并列显示，可以使用el-row ，el-col来布局，然而当浏览器宽度缩小时，因为是按百分比布局，侧边栏和显示栏都会随之压缩，会导致导致布局混乱，比如显示栏换行显示，甚至是ui的样式也发生重叠的现象，后来发现element-ui在宽度不满足的情况下，都有类似情况，所以我们必须设置好min-width，侧边栏和显示栏都要设置，只设置一方，无法解决问题。
如果觉得用element的布局标签觉得很麻烦，或者在灵活度上不太舒服，那就使用flex布局，要实现同样效果可以轻松多了。
element-ui导航栏，刷新页面后，导航栏对应的导航文字高亮消失了
我不知道这是bug,还是开发团队的设计本来就是这样做，没有找到确切的api说明，但是不管怎么样，还是可以解决，解决方法是，写个方法，判断路由路径，把路径设置到default-active属性里，这样刷新页面，对应导航的文字高亮就不消失了。
反馈页面初略显示
好了，前端视图层的效果和编码差不多了(这里代码就不一一贴出来，因为有点多，也不是重点，所以有兴趣了解代码是什么样的，去github吧)，可是数据是死的，接下来，我们就必须把前端逻辑层和后台用express获得数据，把这些数据查出来，并且能通过关键字和时间区间来进行查询。
前端要做的事情就是逻辑处理，路由处理等。逻辑处理有反馈页面的删除记录操作、条件查询、分页查询。路由处理就是，怎么处理路由跳转，怎么设置路由路径。博主采用的是前后端分离的概念，所以在前端发送到后台请求时，由于前后端端口不同，有本地跨域的问题，这时候需要用到vue-cli的跨域设置，下面将会说到。
直接贴代码，反馈页面的逻辑方法实现：
<pre> import { queryFeedbacks, deleteFeedback } from 'api/api';
export default {
data() {
return {
formInline: {
name: '',
keywords: '',
daterange: ''
},
pickerOptions2: {
shortcuts: [{
text: '最近一周',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近三个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
}
}]
},
feedbacks: [],
filtr: {
name: '',
kyw: '',
bdate: '',
edate: '',
page: 1,
pageSize: 10
},
page: {
total: 0,
sizes: [10, 20, 30],
}
}
},
mounted() {
this.getFeedbacks();
},
methods: {
onSubmit() {
this.filtr.name = this.formInline.name;
this.filtr.kyw = this.formInline.keywords;
this.filtr.bdate = this.formInline.daterange[0] ? new Date(this.formInline.daterange[0]).Format("yyyy-MM-dd") : '';
this.filtr.edate = this.formInline.daterange[1] ? new Date(this.formInline.daterange[1]).Format("yyyy-MM-dd") : '';
console.log(this.filtr)
this.getFeedbacks();
},
getFeedbacks() {
let that = this;
let param = this.filtr;
queryFeedbacks(param).then(response => {
let res = response.data;
console.log(res)
if (res.code) {
that.page.total = res.data.total;
that.feedbacks = res.data.feedbacks;
} else {
this.$message({
type: 'error',
message: res.message
})
}
})
},
handleDelete(index, row) {
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
removeFeedback(row.id).then(res => {
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.$message({
type: 'alert',
message: '删除失败'
});
})
});
},
handleSizeChange(val) {
this.filtr.pageSize = val;
this.getFeedbacks();
},
handleCurrentChange(val) {
this.filtr.page = val;
this.getFeedbacks();
}
}
}
Date.prototype.Format = function (fmt) {
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
</pre>
发送请求的插件使用axios ，vue-source已不再被维护
与vue-source相比，axios可以说要简洁干净一些，后来，发现axios确实不错，vue官方就开始推荐使用它，vue2以后，vue-source已经停止了维护。axios对http请求的封装使得get也可以写得看上去和post请求一样，当然了，也可以把参数直接附在url后面来发送get请求。详细看官网，比较简单，不再赘述。
传送门：https://github.com/mzabriskie/axios
系统用到axios：
<pre>
import axios from 'axios'; let apiUrl='/api'; export const removeFeedback=params=>{ return axios.get(\${apiUrl}/feedbacks/remove`,{params:params})}
export const queryFeedbacks=params=>{ return axios.get(`${apiUrl}/feedbacks/query`,{params:params})}`
</pre>
本地跨域使用proxytable解决
如果你在启动看到如下的错误，那你就得用这个设置代理了,位置在config文件夹的index.js（前提是你是用vue-cli构建的项目）。
``xhr.js?14ed:177 XMLHttpRequest cannot load localhost:3000/feedbacks/query?name=&kyw=&bdate=&edate=. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.`
proxytable传送门：https://vuejs-templates.github.io/webpack/proxy.html
系统中设置的代理：
<pre>
dev: {
env: require('./dev.env'),
port: 8080,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {//插件会虚拟一个引起跨域的服务器，代替8080端口发送请求，从而避免跨域
'/api':{//这个吧表的意思就是只要连接里有/api就转为http://127.0.0.1:3000
target:'http://127.0.0.1:3000',
changeOrigin:true,
pathRewrite:{
'^/api':''//这里意思就是转化后不用添加/api,比如/api/1就是http://127.0.01:3000/1
}
}
},
</pre>
express只负责查数据，逻辑处理还给前端
express很简单，只是进行查询，删除操作，这里查询，博主把条件查询，分页查询，全部查询都融合到同一个方法中
<pre>router.get('/remove', function (req, res, next) {
let _feedback = req.body;
console.log(_feedback.id);
let id = connection.escape(_feedback.id);
let sql = 'DELETE FROM feedbacks WHERE id=' + id;
connection.query(sql, function (err, results) {
if (results) {
res.json({ 'code': 1, message: '删除成功！' })
} else {
res.json({ 'code': 0, message: '删除失败！' })
}
})
})
router.get('/query', function (req, res, next) {
let _fb = req.query;
let page = (_fb.page - 1) * 10;//计算查询的起点
let ps = Number(_fb.pageSize);//计算结束点
console.log(_fb.name || _fb.kyw ? 1:0)
console.log(_fb.bdate ? 1:0)
console.log((_fb.bdate ? 1:0) & (_fb.name || _fb.kyw ? 1:0))
console.log(_fb.name || _fb.kyw)
console.log(_fb.bdate & (_fb.name || _fb.kyw))
let flitr = (_fb.name || _fb.kyw || _fb.bdate ? ' WHERE '//如果存在一条条件查询就加where,如果没有直接为空字符串
+ (_fb.name ? 'name="' + _fb.name + '"' : '')//判断name是否需要查询
+ (_fb.name & _fb.kyw ? ' AND ' : '')//如果两者都存在就加上and
+ (_fb.kyw ? ' info like "%' + _fb.kyw + '%"' : '') : '')//判断关键字是否需要查询
+ ((_fb.bdate ? 1:0) & (_fb.name || _fb.kyw ? 1:0) ? ' AND ' : '')//如果时间区间存在并且前面两个条件查询有一个存在就加上and
+ (_fb.bdate ? 'date BETWEEN "' + _fb.bdate + '" AND "' + _fb.edate + '"' : '')
let sql1 = 'SELECT count(*) as total FROM feedbacks ' + flitr + ' ; '
let sql2 = 'SELECT id, name,DATE_FORMAT(date,"%Y-%m-%d") date,info FROM feedbacks ' + flitr + ' LIMIT ' + page + ' , ' + ps
console.log(sql1 + sql2)
connection.query(sql1 + sql2, function (err, results) {
if (err) {
console.log(err);
res.json({
code: 0,
message: '[查询失败]' + err
})
} else {
res.json({
data: {
total: JSON.parse(JSON.stringify(results[0]))[0].total,//这里要特别注意，mysql查出来的数据是object但不是可以直接键值对就可以获得值得，需要json转化。
feedbacks: results[1]
},
code: 1,
message: '查询成功'
})
console.log(results[1])
}
})
})</pre>
最终效果图：
反馈页面模块效果
托管的代码地址：
<pre>
前端：https://github.com/githubziven/font
后台：https://github.com/githubziven/service
</pre>
好了，差不多了，终于把第三篇比较完整的写出来，有很多不完善的地方，将在后面几篇文章发布的同时，进行同步更新。下篇也就是第四篇，是关于框架的上传下载，就是全景图页面的实现。不足之处，评论指出，万分感谢！！
系列文章：
1、Vue2.0+Element+express+mysql 内容管理系统的搭建（一）
2、Vue2.0+Element+express+mysql 内容管理系统的搭建（二）
3、Vue2.0+Element+express+mysql 内容管理系统的搭建（三）
