本系列完整目录
本篇目录
1.简单介绍一下vue
Vue是一款用于构建用户界面的JavaScript框架。它基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助开发者高效地开发用户界面。Vue将组成一个页面的HTML，CSS和JS合并到一个组件中，可以被其他组件或页面引入而重复利用。通常每个.Vue文件作为一个组件导出，组件可以作为基础组件（如按钮）或一个页面（如登录页面）。组件化很好的将一个庞大复杂的前端工程拆分为一个个组件，重复利用的性质也大大提高了开发的效率。
2.vue目录项目构成
package.json是项目的配置文件，常见的配置有配置项目启动、打包命令，声明依赖包等。package.json 文件是一个 JSON 对象，该对象的每一个成员就是当前项目的一项设置。当我们克隆一个新的项目到本地时，需要执行 npm install（yarn install）命令来安装项目所需的依赖文件。当执行该命令时，就会根据 package.json 文件中的配置信息来自动下载所需的模块，也就是配置项目所需的运行和开发环境。
package.json 中最重要的两个字段就是 name 和 version，它们都是必须的，如果没有，就无法正常执行 npm install 命令。npm 规定 package.json 文件是由名称和版本号作为唯一标识符的。
name 很容易理解，就是项目的名称，它是一个字符串。在给 name 字段命名时，需要注意以下几点：
名称的长度必须小于或等于 214 个字符，不能以 “.” 和“_”开头，不能包含大写字母（这是因为当软件包在 npm 上发布时，会基于此属性获得自己的 URL，所以不能包含非 URL 安全字符（non-url-safe））；
名称可以作为参数被传入 require("")，用来导入模块，所以应当尽可能的简短、语义化；
名称不能和其他模块的名称重复，可以使用 npm view 命令查询模块名是否重复，如果不重复就会提示 404：
version 字段表示该项目包的版本号，它是一个字符串。在每次项目改动后，即将发布时，都要同步的去更改项目的版本号。
package-lock.json 文件一般是在npm install时自动生成的，会保存 node_modules 中所有包的信息，包括精确版本 version 和下载地址 resolved 以及依赖关系 dependencies 等，用以记录当前状态下实际安装的各个模块的具体来源和版本号。这样 npm install 时速度就会提升。当删除 node_module 目录时，想通过 npm install 恢复所有包时，提升下载速度；锁定版本号，防止自动升级新版本。
main.js是vue的入口文件，文件中定义了一个vue对象,其中el为实例提供挂载元素。
3.npm基本命令
npm install 用于安装依赖包。当你执行 npm install 时，npm 将会根据项目中的 package.json 文件中的依赖列表，下载并安装所有依赖。
npm run用于运行定义在 package.json 文件中的脚本。
4.session是什么
Session用于记录用户的状态。Session指的是一段时间内，单个客户端与Web服务器的一连串相关的交互过程。在一个Session中，客户可能会多次请求访问同一个资源，也有可能请求访问各种不同的服务器资源。Session是由服务器端创建的。
5.post和get有什么区别
首先是从语义的角度来说，post和put通常用于提交数据，例如增、改操作，get通常用户获取数据，例如查找操作，delete用于删除数据。
其次post和get请求对于参数的传递方式不同。在GET请求中参数是跟在URL后面，使用params传递，参数会动态拼接到url地址中，即 ?id=xx&name=xxx，数据可见。post请求中参数是放在body中，使用data传递，请求的数据不可见。
get请求采用 axios.get(url,{params: 对象})
post请求 axios.post(url,对象)
//封装对象
let user = {
name: "mysql",
age: 18,
sex: "女"
}
axios.get(
"http://localhost:8090/axios/user/getUserObj",{params: user})
.then(function(result){
console.log(result.data)
})
axios.get("http://localhost:8090/axios/user/getUserObj",
{
//key: value key固定写法 params 参数对象
params: {
//再写用户的参数
name: "mysql",
age: 18,
sex: "女"
}
}).then(function(result){
console.log(result.data)
})
let user = {
name: "post请求的语法",
age: 20,
sex: '女'
}
let url1 = "http://localhost:8090/axios/insertUser"
axios.post(url1, user)
.then(function(result){
console.log(result.data)
})
6.前后端如何实现数据传输
前、后端使用ajax进行交互，前端使用vue框架，首先需要引入axios组件，并在main.js文件中引入
import axios from 'axios' // 导入axios库，用于发送HTTP请求
import router from '@/router/router-static' // 导入路由模块，用于页面跳转
import storage from '@/utils/storage' // 导入存储模块，用于操作本地存储
const http = axios.create({ // 创建一个axios实例
timeout: 1000 * 86400, // 设置请求超时时间，单位为毫秒
withCredentials: true, // 允许携带cookie
baseURL: '/alumni', // 设置基础URL
headers: { // 设置请求头
'Content-Type': 'application/json; charset=utf-8' // 设置内容类型为JSON格式，字符集为UTF-8
}
})
// 请求拦截
http.interceptors.request.use(config => { // 使用请求拦截器
config.headers['Token'] = storage.get('Token') // 在请求头中添加Token字段，值为本地存储中的Token值
return config // 返回修改后的请求配置
}, error => { // 请求错误处理
return Promise.reject(error) // 返回一个被拒绝的Promise对象
})
// 响应拦截
http.interceptors.response.use(response => { // 使用响应拦截器
if (response.data && response.data.code === 401) { // 如果响应数据存在且code为401（表示token失效）
router.push({ name: 'login' }) // 跳转到登录页面
}
return response // 返回响应数据
}, error => { // 响应错误处理
return Promise.reject(error) // 返回一个被拒绝的Promise对象
})
export default http // 导出http实例，供其他模块使用
然后就可以使用this.$http发起http请求，调用后端接口，并将所需要的参数和请求路径url进行传递。后端controller层会接收到请求，并调用service层进行业务处理，进而通过mapper层进行数据库操作，将返回的数据传递给前端，前端页面获取到数据进行渲染展示到页面上。
this.$http({
url: `${this.$storage.get("sessionTable")}/update`,
method: "post",
data: this.ruleForm
}).then(({ data }) => {
if (data && data.code === 0) {
this.$message({
message: "修改信息成功",
type: "success",
duration: 1500,
onClose: () => {
// console.log(this.flag)
if (this.flag == 'users') {
this.$storage.set('headportrait', this.ruleForm.image)
}
}
});7.路由
在src/router/index.js，这个文件就是路由的核心文件：
import Vue from 'vue' //引入Vue
import Router from 'vue-router' //引入vue-router
import Hello from '@/components/Hello' //引入根目录下的Hello.vue组件
Vue.use(Router) //Vue全局使用Router
export default new Router({
routes: [ //配置路由，这里是个数组
{ //每一个链接都是一个对象
path: '/', //链接路径
name: 'Hello', //路由名称，
component: Hello //对应的组件模板
}，{
path:'/hi',
component:Hi,
children:[ //子路由,嵌套路由 （此处偷个懒，免得单独再列一点）
{path:'/',component:Hi},
{path:'hi1',component:Hi1},
{path:'hi2',component:Hi2},
]
}
]
})8.面包屑导航
在router配置中加入meta(元数据)对象，存放一些自定义的内容。例如在面包屑的实现中加入title变量，这个变量则是面包屑展示出来的多级标题；
{
path: '/updatePassword',
name: '修改密码',
component: UpdatePassword,
meta: {icon:'', title:'updatePassword'}
}在用到面包屑的页面中调用watch监听，监听route的变化，用this.$route.matched获取到匹配当前路由的所有片段的配置参数对象，返回一个数组，存到list中
watch: {
$route() {
this.getBreadcrumb()
}用v-for 遍历li标签，将list.meta.title作为router-link的{标题信息}，:to=“list.path”，将list信息动态渲染到面包屑上
<el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
<span v-if="item.redirect==='noRedirect'||index==levelList.length-1" >{{ item.name }}</span>
<a v-else @click.prevent="handleLink(item)">
<span class="icon iconfont icon-xihuan"></span>首页
</a>
</el-breadcrumb-item>9.组件的使用
在components中创建vue文件，实现一个组件。要使用一个子组件，我们需要在父组件中导入它，之后可以像普通组件一样进行使用。
<script setup>
import ButtonCounter from './ButtonCounter.vue'
</script>
<template>
<h1>Here is a child component!</h1>
<ButtonCounter />
</template>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
