VUE第九天学习

内容：git和项目后台功能实现 一、git 版本控制软件，多人协作开发项目（管理项目代码文件） svn，它必须要有一个中心服务器 git，分布式版本管理软件，它不需要中心服务器，每一台电脑都是独立的服务器 1.git下载和安装 官网：https://git-scm.com/ 安装：如无特殊需要，一路默认就可以。 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) } //管理员信息页面代码

本文章由javascript技术分享原创和收集