day09

一、git版本控制软件

1.安装

官网：https://git-scm.com/

下载安装，没有特殊要求的话一路下一步就可以安装完成。

2.基本命令

安装成功后，在任意的磁盘路径下点鼠标右键，选择git bash here，打开git终端。

(1)配置用户信息

查看配置列表

git config --list

配置用户信息

git config --global user.name “你的用户名”
git config --global user.email "你的常用邮箱"

(2)初始化git仓库

工作区、暂存区、版本库

把工作区的文件添加到暂存区

把暂存区的文件提交到版本库

创建一个项目文件夹，点鼠标右键，选择git bash here，打开git终端

git init

(3)把文件提交至版本库

①创建目录/文件

mkdir 目录名称
touch 文件名.后缀名

②查看暂存区状态

git status

③把文件添加到暂存区

git add index.html      添加指定的一个文件
git add *.html          添加指定的一类文件
git add *               添加所有文件
git add .
git add -A

文件状态是红色时，表示未添加到暂存区

文件状态是绿色时，表示已添加到暂存区，可以提交到版本库了

④提交文件到版本库

git commit -m "备注信息"

(4)切换版本

回退版本

git reset --hard HEAD^      回退到上一个版本
git reset --hard HEAD^^     回退到上两个版本
git reset --hard HEAD~整数值 回退到前多少个版本

查看当前版本日志

git log

查看所有版本

git reflog

切换版本

git reset --hard 版本号

(5)对比文件差异

git diff 文件名.后缀名

(6)撤销修改

git checkout -- 文件名.后缀名

3.分支

master 主分支，可以分布对外访问

develop 开发分支

debug 调试bug

fixed 修复分支

release 预发布分支

...

(1)创建分支

git branch 分支名称

(2)查看分支

git branch

(3)切换分支

git checkout 分支名称

创建并切换分支

git checkout -b 分支名称

(4)删除分支

git branch -d 分支名称

(5)分支合并

git merge 被合并分支名称

冲突

4.远程仓库

github.com

gitee.com 码云

(1)注册远程仓库账号

(2)创建远程仓库

(3)在本地仓库中添加远程仓库地址

git remote add origin https://github.com/你的用户名/你的仓库名称.git

如果要更换远程仓库地址，先删除原有的远程仓库地址，然后再次添加其他远程仓库地址

git remote rm origin

(4)推送本地仓库到远程仓库上

git push -u origin master

(5)项目团队成员克隆项目

只克隆一次即可

git clone https://github.com/你的用户名/你的仓库名称.git

(6)拉取远程仓库资源

git pull

二、项目静态页面准备

<template>
    <div>
        <h1>菜单表单页</h1>
        <!-- 
            el-form 表单验证
                model 要验证的数据
                rules 验证规则
                ref 可以通过dom操作来实现调用组件的属性和方法
         -->
        <el-form :model="info" :rules="rules" ref="menuform" style="width:400px;" label-width="80px">
            <!-- prop属性是rules验证规则中的键名 -->
            <el-form-item label="上级菜单" prop="pid">
                <el-select v-model="info.pid">
                    <el-option label="顶级菜单" :value="0"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="菜单名称" prop="title">
                <el-input placeholder="请输入菜单名称" v-model="info.title"></el-input>
            </el-form-item>
            <el-form-item label="菜单类型">
                <el-radio-group v-model="info.type">
                    <el-radio :label="1">目录</el-radio>
                    <el-radio :label="2">菜单</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="菜单图标" v-show="info.type==1">
                <el-input placeholder="请输入菜单图标" v-model="info.icon"></el-input>
            </el-form-item>
            <el-form-item label="菜单地址"  v-show="info.type==2">
                <el-input placeholder="请输入菜单地址" v-model="info.url"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-switch v-model="info.status" :active-value="1" :inactive-value="2"></el-switch>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submit">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
​
<script>
export default {
    data(){
        // 定义菜单的初始数据
        return{
            info:{
                pid:'',
                title:'',
                type:1,
                icon:'',
                url:'',
                status:1
            },
            rules:{
                pid:[
                    // required:true 必填项，message 提示信息
                    { required:true,message:'请选择上级菜单' }
                ],
                title:[
                    { required:true,message:'请填写菜单名称' },
                    { min:3,max:20,message:'菜单名称应该在3-20个字符之间' }
                ]
            }
        }
    },
    methods:{
        submit(){
            this.$refs['menuform'].validate((val)=>{
                if(val){
                    //验证成功
                    alert('验证成功')
                }
            })
        }
    }
}
</script>

三、接口项目准备

1.解压接口项目

2.进入项目根目录，执行npm i

3.修改项目根目录下config/global.js数据库相关的配置信息

4.确认mysql数据库是启动状态

5.新建一个数据库，导入数据库文件

6.在项目根目录下执行npm start启动接口项目

项目启动成功后，在浏览器地址中访问

localhost:3000/api/menulist

出现这样的提示时，就表示接口项目已经准备好了

{
    "msg": "操作成功",
    "code": 200,
    "list": null
}

四、网络请求

1.安装

npm i axios

2.引入

import axios from 'axios'

3.基本使用

配置代理映射表

项目根目录/config/index.js

 // 代理映射配置表
    proxyTable: {
        // http://localhost:8080/api/menuadd
        // http://localhost:3000/api/menuadd
        '/api':{
            target:'http://localhost:3000',//目标地址
            changeOrigin:true//允许跨域
        }
    },

==重启项目==

(1)post请求

axios.post('请求地址',要提交的数据).then(获取结果)

在菜单添加的页面组件中使用：

submit(){
    this.$refs['menuform'].validate((val)=>{
        if(val){
            //验证成功
            //调用接口，完成数据的添加操作
            axios.post('/api/menuadd',this.info).then(res=>{
                //给出提示或者跳转页面
                this.$router.push('/menu')
            })
        }
    })
}

(2)get请求

axios.get('请求地址').then(获取结果)

在菜单的表格页面中

export default {
    data(){
        return{
            arr:[]
        }
    },
    mounted(){
        axios.get('/api/menulist').then(res=>{
            this.arr = res.data.list;
        })
    }
}
</script>