内容：git和项目后台功能实现
一、git
版本控制软件，多人协作开发项目（管理项目代码文件）
svn，它必须要有一个中心服务器
git，分布式版本管理软件，它不需要中心服务器，每一台电脑都是独立的服务器
1.git下载和安装
安装：如无特殊需要，一路默认就可以。
2.常用命令
(1)配置用户信息
查看用户信息：git config --list
设置用户名： git config --global user.name "你的用户名"
设置邮箱： git config --global user.email "你的邮箱地址(注册github的账号)"
(2)初始化git项目
工作区、暂存区、版本库
进入到指定的磁盘目录，然后执行如下命令：
创建文件夹：mkdir git_test (make directory)
进入目录：cd git_test (change directory)
初始化项目：git init
(3)提交文件并创建版本
创建文件：touch 文件名.后缀名
查看状态：git status
添加文件：git add 文件名
提交版本：git commit -m "备注信息"
(4)查看文件区别
git diff 文件名
(5)查看提交日志
git log
(6)查看版本信息
git reflog
(7)版本回退
git reset --hard HEAD^ 回退到上一个版本
HEAD^^^^^
HEAD~整数值 回退到指定数字的版本
git reset --hard 版本号
(8)撤销修改
git checkout -- 文件名
(9)分支
master 主分支 可以对外发布的版本(可以上线的版本)
develop 开发分支，功能开发中的分支（除了主分支，其他分支均不对外发布）
feature 即将要发布的分支
release 可发布分支
fixbug 调试bug分支
other 其他分支
分支相关命令：
git branch 查看分支
git branch 分支名称 创建分支
git checkout 分支名称 切换分支
git merge 分支名称 合并分支
git branch -d 分支名称 删除分支
git checkout -b 分支名称 创建并切换到指定的分支上
3.结合github进行协作
①注册github或者gitee账号
②生成ssh秘钥
ssh-keygen -t rsa -C "你的邮箱"
③创建远程仓库（在github或者gitee中进行）
④在本地git中添加远程仓库
git remote add origin https://gitee.com/msword/mytest.git （码云）
git remote add origin https://github.com/jkmsword/mytest.git （github）
⑤把本地中的仓库资源推送到远程仓库中
git push -u origin master
⑥克隆项目
git clone 远程仓库地址
⑦获取远程仓库资源
git fetch （仅下载）
git merge
⑧获取远程仓库资源并合并当前分支上
git pull
⑨在本地git中删除远程仓库
git remote rm origin
二、项目后台管理员管理功能
1.安装mongodb数据库
2.运行接口项目
进入到接口项目目录下
npm i 下载依赖(下载之后就不用再下载--仅执行一次)
node app.js 运行接口项目
3.管理员添加功能
在vue项目的管理员用户添加页面里，点击提交按钮时执行如下代码：
this.axios.post('/api/useradd',this.ruleForm).then(res=>{
if(res.data.status == 1){
this.$router.push('/user')
}
})
axios.post('要请求的接口地址',要提交的数据)
4.管理员查询功能
在vue项目的管理员列表页面里，mounted钩子函数中执行如下代码进行用户信息获取：
this.axios({
url:'/api/userlist'
}).then(res=>{
this.tableData = res.data.data
})
5.管理员删除功能
在vue项目的管理员列表页面里，当用户点击修改时，通过axios请求删除的接口实现把数据库中指定的用户删除掉。
handleDelete(index, row) {
this.axios({
method:'post',//method默认是get
url:'/api/userdel',//请求地址
data:{ id:row._id }
}).then(res=>{
this.tableData.splice(index,1)
})
}
6.管理员修改功能
(1)详情页面展示
当vue项目的管理员列表页面里，当用户点击详情按钮时，通过$router进行页面跳转并传递参数
//路由配置
export default new Router({
routes: [
{ path: '/login', component: Login },
{
path: '/',
component: Layout,
children: [
{ path: 'index', component: Index },
{ path: 'user', component: UserIndex },
{ path: 'user/add', component: UserInfo },
{ path:'user/:id',component:UserInfo }
]
}
]
})
注意动态路由要放在同级路由的最后，防止匹配错误
//列表页面代码
handleEdit(index, row) {
this.$router.push('/user/'+row._id)
}
//管理员信息页面代码
<template>
<div class="app-container">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/user' }">管理员列表</el-breadcrumb-item>
<el-breadcrumb-item>管理员{{ tip }}</el-breadcrumb-item>
</el-breadcrumb>
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm"
>
<el-form-item label="用户名" prop="username">
<el-input v-model="ruleForm.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="ruleForm.password" type="password"></el-input>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-switch v-model="ruleForm.status" active-text="启用" inactive-text="禁用"></el-switch>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">{{tip}}</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
mounted(){
if(this.$route.params.id){
this.tip = '修改'
//如果路由有id参数，则认为是要展示管理员信息
this.axios({
url:'/api/userinfo',
params:{ id : this.$route.params.id }
}).then(res=>{
this.ruleForm = res.data.data
this.ruleForm.id = this.ruleForm._id;
delete this.ruleForm._id;
delete this.ruleForm.__v;
this.ruleForm.password = '';//如果不填写密码，则不修改密码，填写了之后才修改密码
})
}
},
data() {
return {
tip:"添加",
ruleForm: {
username: "",
password: "",
status: true
},
rules: {
username: [
{ required: true, message: "请输入用户名", trigger: "blur" },
{ min: 2, max: 10, message: "长度在 2 到 10 个字符", trigger: "blur" }
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
var url = this.$route.params.id ? "/api/useredit" : "/api/useradd";
this.axios.post(url, this.ruleForm).then(res => {
if (res.data.status == 1) {
this.$router.push("/user");
}else{
alert(res.data.info)
}
});
} else {
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
};
</script>
<style scoped>
</style>
网友评论