vueday09
一、git版本控制软件
下载安装，没有特殊要求的话一路下一步就可以安装完成。
2.基本命令
安装成功后，在任意的磁盘路径下点鼠标右键，选择git bash here，打开git终端。
(1)配置用户信息
查看配置列表
git config --list
配置用户信息
git config --global user.name “你的用户名”
git config --global user.email "你的常用邮箱"
(2)初始化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 版本号
git diff 文件名.后缀名
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数据库相关的配置信息
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>
浙公网安备 33010602011771号