VUE第九天学习

2020-02-20 本文已影响0人誩先生

内容：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)
}

//管理员信息页面代码

<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>