內(nèi)容：git和項目后臺功能實現(xiàn)

一、git

版本控制軟件，多人協(xié)作開發(fā)項目（管理項目代碼文件）

svn劳坑，它必須要有一個中心服務器

git，分布式版本管理軟件成畦，它不需要中心服務器距芬，每一臺電腦都是獨立的服務器

1.git下載和安裝

官網(wǎng)：https://git-scm.com/

安裝：如無特殊需要涝开，一路默認就可以。

2.常用命令

(1)配置用戶信息

查看用戶信息：git config --list

設置用戶名： git config --global user.name "你的用戶名"

設置郵箱： git config --global user.email "你的郵箱地址(注冊github的賬號)"

(2)初始化git項目

工作區(qū)框仔、暫存區(qū)舀武、版本庫

進入到指定的磁盤目錄，然后執(zhí)行如下命令：

創(chuàng)建文件夾：mkdir git_test (make directory)

進入目錄：cd git_test (change directory)

初始化項目：git init

(3)提交文件并創(chuàng)建版本

創(chuàng)建文件：touch 文件名.后綴名

查看狀態(tài)：git status

添加文件：git add 文件名

提交版本：git commit -m "備注信息"

(4)查看文件區(qū)別

git diff 文件名

(5)查看提交日志

git log

(6)查看版本信息

git reflog

(7)版本回退

git reset --hard HEAD^ 回退到上一個版本

? HEAD^^^^^

? HEAD~整數(shù)值 回退到指定數(shù)字的版本

git reset --hard 版本號

(8)撤銷修改

git checkout -- 文件名

(9)分支

master 主分支 可以對外發(fā)布的版本(可以上線的版本)

develop 開發(fā)分支离斩，功能開發(fā)中的分支（除了主分支银舱，其他分支均不對外發(fā)布）

feature 即將要發(fā)布的分支

release 可發(fā)布分支

fixbug 調(diào)試bug分支

other 其他分支

分支相關命令：

git branch 查看分支

git branch 分支名稱 創(chuàng)建分支

git checkout 分支名稱 切換分支

git merge 分支名稱 合并分支

git branch -d 分支名稱 刪除分支

git checkout -b 分支名稱 創(chuàng)建并切換到指定的分支上

3.結合github進行協(xié)作

①注冊github或者gitee賬號

②生成ssh秘鑰

ssh-keygen -t rsa -C "你的郵箱"

③創(chuàng)建遠程倉庫（在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數(shù)據(jù)庫

2.運行接口項目

進入到接口項目目錄下

npm i 下載依賴(下載之后就不用再下載--僅執(zhí)行一次)

node app.js 運行接口項目

3.管理員添加功能

在vue項目的管理員用戶添加頁面里跛梗，點擊提交按鈕時執(zhí)行如下代碼：

this.axios.post('/api/useradd',this.ruleForm).then(res=>{
     if(res.data.status == 1){
         this.$router.push('/user')
     }
})

axios.post('要請求的接口地址',要提交的數(shù)據(jù))

4.管理員查詢功能

在vue項目的管理員列表頁面里寻馏，mounted鉤子函數(shù)中執(zhí)行如下代碼進行用戶信息獲取：

this.axios({
    url:'/api/userlist'
}).then(res=>{
    this.tableData = res.data.data
})

5.管理員刪除功能

在vue項目的管理員列表頁面里核偿，當用戶點擊修改時操软，通過axios請求刪除的接口實現(xiàn)把數(shù)據(jù)庫中指定的用戶刪除掉。

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進行頁面跳轉并傳遞參數(shù)

//路由配置

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 }
            ]
        }
    ]
})

注意動態(tài)路由要放在同級路由的最后家乘，防止匹配錯誤

//列表頁面代碼

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="狀態(tài)" 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參數(shù)蝗羊，則認為是要展示管理員信息
            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>