一、前端项目初始化
1、安装vue脚手架
通过在终端运行：npm install -g vue-cli，其他的选项根据需求进行选择；
2、通过vue脚手架创建项目
通过终端运行：vue create new_shop1(创建Vue项目)；
3、配置Vue路由
通过终端安装路由插件：npm install vue-router --save；
4、配置Elemeent-UI组件库
通过全局引入的方式，通过终端：npm install element-ui —save安装enementui库；
5、配置axios库
通过终端安装axios插件：npm install axios --save；
6、初始化git远程仓库
创建一个git远程仓库并把你创建的本地Vue项目上传到仓库当中，要下载一个git-bash，这是帮助运行git代码，进行更加方便的上传。
7、将本地项目托管到Github或码云(gitee)中
在项目终端使用git命令将本地仓库中的项目上传到码云中去，这里推荐使用码云，因为Github是国外的服务器，上传和下载都比较慢，而码云是国内的服务器运行的，更快些，推荐使用。
8、后台项目的环境安装和配置
- 安装MySQL数据库
- 安装node环境
- 配置项目相关信息
- 启动项目
- 使用Postman测试测试后台接口项目是否正常
二、各个功能模块的工作
1、登录退出功能模块
在本地创建一个login分支在终端中运行，git checkout -b login ------在本地仓库创建一个login子分支仓库，在login分支中进行代码的编写；
先是简单的界面的搭建，然后把登录板块作为一个组件，通过路由的方式进行加载，登录的主要业务流程如下：
- 在登录页面输入用户名和密码；
- 调用后台接口进行验证；
- 通过验证之后，根据后台的响应状态跳转到项目主页； 登录的核心业务逻辑代码块如下：
// 登录验证方法
loginSystem(userInfo) {
this.$refs.elLoginForm.validate(async valid => {
if (valid) {
const { data: res } = await this.$http({
method: 'POST',
url: 'login',
data: this.userInfo
})
if (res.meta.status === 200) {
// 1、提示登录成功
this.$message.success(res.meta.msg)
// 3、保存token值
window.sessionStorage.setItem('token', res.data.token)
// 2、跳转到home界面
this.$router.push('/home')
// 2和3顺序不能错，要先保存后跳转
} else {
this.$message.error(res.meta.msg)
}
} else {
this.$message.error('您输入的信息有误！')
}
})
}
},
完成之后将代码上传到码云上，主要方法： 打开vscode终端：
- git status ----查看源代码状态
- git add . ----将所有修改的文件添加到暂存区
- git commit -m "完成了登录功能" ----将暂存区中的内容上传到了本地仓库中
- git branch ---查看当前所处的分支（现在处于login分支中）
- git checkout master ----切换到主分支当中
- git merge login ----将本地仓库中login中的代码合并到master主分支中
- git push ----将主分支中的代码上传到码云仓库中 这时候你可以查看云端只有一个分支，mater分支，主分支，所以将本地login子分支上传到云端。
- git checkout login ----切换到login子分支
- git branch ----可以查看现在已经在login子分支中
- git push -u origin login ----将本地login子分支上传到码云当中，并命名码云中分支的名字页叫做login，这时候登录码云就可以查看到两个分支master和login 下面的模块基本上都是这种方式，下面的模块就不在赘述，只说核心的业务逻辑和遇到的困难。
2、主页模块
主页模块没有什么业务逻辑效果，主要是路由设置和页面样式的搭建，这里就不在多家赘述。效果如下图所示：
3、用户列表功能模块
主要核心功能有：
- 添加用户；
- 搜索用户
- 修改用户；
- 删除用户；
- 为用户分配角色。
methods: {
// 取消分配角色事件
cancelRoleInfo() {
this.$message.info('您已取消分配新角色')
this.setRoleDialogVisible = false
},
// 监听分配角色对话框的关闭事件
setRoleDialogClose() {
this.selectedRoleId = ''
this.userInfo = {}
},
// 为角色分配的确定按钮定义事件(点击确定，分配新角色)
async saveRoleInfo() {
if (!this.selectedRoleId) {
return this.$message.error('请选择要分配的新角色！')
}
const { data: res } = await this.$http.put(`users/${this.userInfo.id}/role`,
{ rid: this.selectedRoleId })
// console.log(res)
if (res.meta.status !== 200) {
return this.$message.error('更新角色失败')
}
this.$message.success('更新用户角色成功')
this.getUserList()
this.setRoleDialogVisible = false
},
// 修改用户信息并提交
elitUserInfo() {
// 校验信息是否正确
// 表单验证,验证是否进行了修改,没有修改将不会提交,只有修改了才进行提交
this.$refs.editFromRef.validate(async valid => {
if (!valid) return
// 发起网络请求进行修改数据的提交
const { data: res } = await this.$http.put('users/' + this.editFrom.id,
{
email: this.editFrom.email,
mobile: this.editFrom.mobile
})
if (res.meta.status !== 200) {
this.$message.error('更新用户信息失败')
} else {
// 关闭对话框
this.elitDialogVisible = false
// 刷新数据列表
this.getUserList()
// 提示修改成功
this.$message.success('修改数据成功')
}
})
},
// 监听修改对话框的关闭事件 (表单的重置操作)
editDialogClosed() {
this.$refs.editFromRef.resetFields()
},
// 编辑用户处理函数
async showEditDialog(id) {
console.log(id)
const { data: res } = await this.$http.get('users/' + id)
if (res.meta.status !== 200) {
return this.$message.error('查询用户信息失败!')
}
this.editFrom = res.data
this.elitDialogVisible = true
},
// 获取用户列表信息方法
async getUserList() {
const { data: res } = await this.$http('users', { params: this.queryInfo })
// console.log(res)
if (res.meta.status === 200) {
// 获取成功
this.userlist = res.data.users
this.total = res.data.total
// this.$message.success('获取用户列表成功')
} else {
// 获取失败
this.$message.error('获取用户列表失败')
}
}
},
效果图展示：
下面的模块运用的技术基本上也都是上面这些，这里就不在赘述，想要看具体项目的下方有源码，可以直接在gitee上下载。
四、总结
本项目主要用到的技术有nodeJS、MySQL、Vue、elementUI、axios
-
前端源代码地址如下 gitee.com/wangpanyang…
-
后台代码地址如下(包含数据库和后台代码)： gitee.com/wangpanyang…
- 思想感悟： 你所担心的事情都会被一个东西所解决那就是时间，在时间到达之前你要做的就是尽自己最大的努力就行，尽人事，听天命！
