目录
一 知识回顾
1 Axios案例
1.1 Ajax发展史
1)JS的原生Ajax操作,处理复杂,不便于使用
2)JQuery 是JS的高级函数类库,封装了很多方法(API),简化了程序调用的过程(回调地狱:Ajax的多层嵌套问题)
3)promise对象,将Ajax嵌套的结构转化为链式加载的结构, ajax.get("url",xxx).then(xxxx)
4)Axios主要封装了promise对象,将调用变得更加的简化,整个的VUE.JS中大部分条件下都整合了axios,发起ajax请求---以后工作的API,需要记住
1.2 请求的类型
http常用的请求类型有8种,但是一般四种需要单独记忆
1)查询操作时--Get请求类型--特点:参数结构key=value--url?key=value&key2=value2...;
2)新增(form表单)--Post请求类型--特点:会将参数封装到请求头(head)中,相对更加安全 key=value key2=value2...可以采用对象的方式接收;而Axios中的post请求类型,参数是一个JSON串{key1:value1,key2:vlaue2..},需要将JSON串转化为对象,这就用到了@RequestBody注解转化成对象;
3)删除操作--delete请求类型--特点与get请求类型语法格式一致;
4)更新操作--Put请求类型--特点与Post请求类型语法格式一致;
5)restFul风格--在上述的四大请求类型中都可以使用,它是一个单独的体系,参数使用/斜杠分割,注意参数结构,灵活选用;
二 组件化思想
1.组件化说明
说明:传统页面开发,会将大量的HTML/CSS/JS引入,但是引入之后结构变得混乱,不便于管理,开发维护时成本较高
组件化思想:
在VUE中,可以将一个组件看作是一个页面,在其中可以引入独立的样式/JS/HTML 进行单独的管理.
组件可以进行复用.
关键字: 组件–页面 (html/css/js)
2.组件的入门案例
2.1 组件入门写法--全局组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组件化</title>
</head>
<body>
<div id="app">
<h1>组件化结构</h1>
<!-- 1.需求:编辑一首静夜思,
要求代码尽可能可以复用
实现策略:组件化思想
2.组件化步骤:
1)定义组件
全局组件:在任意的div都可以引入该组件
局部组件:只有特定的div才可以引入组件
2)编辑组件key(注意驼峰规则的写法)
编辑组件体--特殊语法:定义属性时,data(){return{key:value}}
html的标签--使用template进行标记
3)通过key对组件进行使用
-->
<!-- 第三步.
1.组件标签的使用--放在app标签之内才能解析
2.如果采用驼峰规则命令,则中间使用-横线连接-->
<hello-com></hello-com>
<!-- 以后复用直接cv标签即可 -->
<hello-com></hello-com>
<hello-com></hello-com>
</div>
<!-- 第2步.定义组件的模板html,
注意:1.切记标识在app之外!!!vue.js的div之外
2.要求模板字符串必须有根标签--div标签-->
<template id="helloTem">
<div>
<h3>静夜思</h3>
<div>
床前明月光，疑是地上霜。
举头望明月，低头思故乡。
</div>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
/* 第1步.定义组件 */
//Vue.component("key","组件体")
Vue.component("helloCom",{
template:"#helloTem"//id选择器
})
const app =new Vue({
el:"#app",
data:{
},
methods:{
}
})
</script>
</body>
</html>
2.2 定义属性,必须添加return,返回值就是结果
1)定义组件
/* 第1步.定义组件 */
//Vue.component("key","组件体")
Vue.component("helloCom",{
//定义属性,必须添加return返回值
//data:funcation(){return{key:value}}
data(){
return{
//key:value
msg:"我是组件"
}
},
template:"#helloTem"//id选择器
})2)组件标签
<template id="helloTem">
<div>
<h3>静夜思</h3>
<div>
床前明月光，疑是地上霜。
举头望明月，低头思故乡。
引入属性:{{msg}}
</div>
</div>
</template>页面效果:
3 局部组件
注意:局部组件只能在vue.js的对象中使用组件标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组件化</title>
</head>
<body>
<div id="app">
<h1>局部组件</h1>
<!-- 引入组件 -->
<hello-com></hello-com>
<hello-com></hello-com>
<hello-com></hello-com>
</div>
<template id="helloTem">
<div>
<h1>我是局部组件AAA</h1>
属性值:{{msg}}
</div>
</template>
<!-- 引入vue.js文件 -->
<script src="../js/vue.js"></script>
<script>
//声明组件
let helloCom = {
//属性定义
data(){
return{
//key:value
msg:"我是局部组件"
}
},
//template:html代码结构
template: "#helloTem"
}
/* 说明:只能在某个VUE的对象之内,使用组件标签 */
const app =new Vue({
el:"#app",
data:{
},
methods:{
},
//定义局部组件
components:{
//组件key:组件体value
//helloCom: helloCom
//如果key-value相同,则JS可以简化为key,JS弱类型,语法不严格
helloCom
}
})
</script>
</body>
</html>
页面效果:
key-value的简化写法
三 VUE中的路由机制
1 路由介绍
1)说明:用户发起一个请求,在互联网中经过多个站点跳转,最终获取服务器端的数据,把互联网中网络的链路称之为路由.(网络用语)
2)VUE中的路由:根据用户请求URL地址,展现特定的组件(页面)信息.(用来控制用户程序-跳转-过程)
2 路由的步骤
- 导入路由.JS
- 指定路由跳转的连接
- 定义路由的填充位
- 封装组件信息,并指定路由对象--难点!!!
- 在VUE对象中声明组件(路由)
3 路由入门案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>局部组件</title>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组件化</title>
</head>
<body>
<div id="app">
<!-- <a href="设定跳转的地址">百度</a> -->
<!-- 第二步:
1.router-link--被编译后转化为a标签
2.关键字 to--被编译后转化为href属性
-->
<router-link to="/user">用户</router-link>
<router-link to="/dog">狗狗</router-link>
<!-- 第三步:指定路由的填充位置,未来展现组件信息
填充的位置被解析后就是一个div-->
<router-view></router-view>
</div>
<!-- 第五步:定义组件标签体-->
<template id = "userTem">
<div>
<h3>用户信息</h3>
</div>
</template>
<template id="dogTem">
<div>
<h3>狗狗信息</h3>
</div>
</template>
<!-- 第一步:
1.导入路由JS:先导入vue.js.在导入路由.js,按照顺序导入-->
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script>
/* *第四步:准备组件,定义路由对象
*/
let userCom = {
//第六步:引入组件标签体
//template:"xxxxxx'
template:"#userTem"
}
let dogCom = {
//template:"xxxxxx"
template:"#dogTem"
}
/*第七步:定义路由对象
*routes:路由的多个映射通过该属性进行定义*/
const vueRouter = new VueRouter({
routes: [
{path:"/user", component: userCom},
{path:"/dog", component: dogCom}
]
})
const app =new Vue({
el:"#app",
data:{
},
methods:{
},
//第八步,实现路由挂载
router :vueRouter
})
</script>
</body>
</html>
4 重定向和转发
注意:请求和转发都是服务器行为,不会做额外操作
4.1 转发问题
说明:用户访问服务器,但是目标服务器无法处理该请求,由服务器内部将请求交给其他服务器处理,这个过程称之为转发.
4.2 重定向
说明:用户访问服务器,但是目标服务器无法处理该请求,目标服务器返回一个能够处理请求的网址,由用户再次发起请求,来访问服务器获取数据
5 路由关键字
5.1 redirect路由的重定向
需求:要求用户访问"/"的根目录,要求重定向到"/user"
/*第七步:定义路由对象
*routes:路由的多个映射通过该属性进行定义
* redirect: 实现数据重定向
* 在vue路由中只有重定向没有转发*/
const vueRouter = new VueRouter({
routes: [
//重定向到程序指定的地址,返回的也是指定地址的数据
{path:"/", redirect:"/user"},
//{path:"/", redirect:"/dog"},//会跳到指定的dog地址及数据
{path:"/user", component: userCom},
{path:"/dog", component: dogCom}
]
})
6 嵌套路由
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>嵌套路由</title>
</head>
<body>
<div id="app">
<!-- 1.定义路由 -->
<router-link to="/user">用户</router-link>
<router-link to="/dog">狗狗</router-link>
<!-- 2.路由占位A -->
<router-view></router-view>
</div>
<template id="userTem">
<div>
<h1>用户组件</h1>
</div>
</template>
<template id="dogTem">
<div>
<h1>动物组件</h1>
<!-- 准备2个组件 -->
<router-link to="/samo">萨摩耶</router-link>
<router-link to="/bite">比特犬</router-link>
<!-- 定义路由占位符B -->
<router-view></router-view>
</div>
</template>
<template id="samoTem">
<div>
<h3>白色的萨摩</h3>
</div>
</template>
<template id="biteTem">
<div>
<h3>凶猛的狗</h3>
</div>
</template>
<!-- 先导vue.js再导路由.js -->
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script>
let userCom = {
template:"#userTem"
}
let dogCom = {
template:"#dogTem"
}
let samoCom = {
template:"#samoTem"
}
let biteCom = {
template: "#biteTem"
}
/*路由展现问题说明:
如果需要进行路由嵌套,需要采用children
子级的路由会在当前的路由占位符中进行展现*/
//3.定义路由对象
const router = new VueRouter({
routes:[
{path:"/user",component: userCom},
{path:"/dog",component: dogCom,children:[
{path:"/samo",component: samoCom},
{path:"/bite",component: biteCom}
]}
]
})
//需要vue对象进行挂载
const app = new Vue({
el:"#app",
//vue对象挂载
router: router
})
</script>
</body>
</html>
页面效果:
四 京淘项目搭建
1 京淘项目后台搭建
1.1 创建module
1.2 导入pom.xml依赖
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.5.2</version>
<relativePath/>
</parent>
<properties>
<java.version>1.8</java.version>
<!--跳过测试类打包-->
<skipTests>true</skipTests>
</properties>
<!--原则: 按需导入 -->
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<!--支持热部署 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
</dependency>
<!--添加lombok依赖-->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</dependency>
<!--引入数据库驱动-->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<!--springBoot数据库连接-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-jdbc</artifactId>
</dependency>
<!--导入MP包后，删除原有的Mybatis的包-->
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.4.3</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<version>2.5.2</version>
</plugin>
</plugins>
</build>1.3 后台代码结构
说明: 根据码云中的代码结构完成 项目构建
本操作可以复制已有的项目文件:
输入地址:http://localhost:8091/hello
查看到指定表的内容:
1.4 后台启动项配置
打开主启动类,右键点击最上方:
修改启动类名称是为了能够很快找到需要启动的类
2 京淘前端搭建
2.1 node.js安装
安装成功之后效果:
2.2 安装VUE 客户端程序
npm是node 安装软件/环境的工具.
配置淘宝镜像: 1).npm install -g cnpm --registry=https://registry.npm.taobao.org
安装VUE客户端: 命令: npm install -g @vue/cli --force
安装成功后的效果:
2.3 导入前端项目
1). 找到前端项目文件
2).找到后端过程的包路径,导入前端项目jtadmin包或者文件,进行解压
3)编辑路径 编辑成功之后,导入项目即可
复制解压后的文件路径粘贴到vue项目管理器的导入栏中,enter键确定即可
4)项目运行
引入项目之后,启动服务.
5) 终止程序.
3 手动安装脚手架
注意事项
如果通过鼠标点击DOS命令窗口,则DOS命令窗口可能处于锁定状态,通过ctrl+c的形式 解除锁定
报错说明: 只剩一个报错信息
1.则关闭客户端重启.
2.重新导入src文件
3.如果上述的操作还不能解决
3.1 直接导入我的项目 jtadmin
3.2 将上述的操作 重复执行
4 打开项目
4.1 HBuilder前端打开项目
说明:由于脚手架其中需要编辑HTML/CSS/JS 所以需要利用Hbuilder进行打开.
1).查看项目位置
2). 利用hubilder软件打开.即可
4.2 什么是脚手架
原来写前端代码时 需要自己手动维护html/css/js. 并且如果文件如果很多 缺乏一种统一的方式进行管理.
可以向后端代码一样Controller/Service/Mapper 将代码进行分层管理. 前端仿照后端 开发了一个脚手架项目结构
4.3 脚手架结构分析
代码结构:
4.4 正确理解.vue文件
知识复习:
1. 组件 HTML/CSS/JS 这些都可以封装到组件中.
2. ** 重点:在脚手架中 xxx.vue 代表一个组件 **
4.5 理解main.js
总结: main.js作用
1.导入整个项目中所用到的js.
2.实例化VUE对象.
3.通过实例化的VUE对象渲染程序.
1)引入组件/插件/JS
//import表示导入规则 导入vue.js 并且命名为Vue
import Vue from 'vue'
import App from './App.vue'
//导入路由.js
import router from './router'
import './plugins/element.js'
import './assets/css/global.css'
import './assets/ali-icon/iconfont.css'
/* 导入富文本编辑器 */
import VueQuillEditor from 'vue-quill-editor'
/* 导入富文本编辑器对应的样式 */
import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.bubble.css' // for bubble theme
2)环境设定
/* 导入axios js */
import axios from 'axios'
/* 设定axios的请求根目录 设定服务器请求网址 */
axios.defaults.baseURL = 'http://localhost:8091/'
/*向vue对象中添加全局对象 以后发送ajax请求使用$http对象
方便其他的JS调用Axios,将变量定义为全局变量
Vue.prototype:定义全局变量,命名为$http 来代替Axios
*/
Vue.prototype.$http = axios
Vue.config.productionTip = false
3)初始化VUE对象
- 传统的VUE对象的创建方式
-
//需要vue对象 进行挂载 const app = new Vue({ //通过el 指定VUE对象渲染元素的区域. el: "#app", //vue对象挂载路由 //router: router //如果key=value 则使用key代替 router })2.脚手架中的写法:
-
1.引入 组件 import App from './App.vue' 2.定义默认DIV <template> <div id="app"> <!-- 添加路由占位符--> <router-view></router-view> </div> </template> //3. 找到指定的xxx.vue文件, 找到指定的DIV进行渲染. new Vue({ //引入路由的机制 router, render: h => h(App) }).$mount('#app')
4.6 关于脚手架路由规范
1.路由占位符的位置:
说明:根据用户的路由地址之后在该区域展现组件信息.
2.路由规则:
引入规范: import router from './router'
3.路由策略:
4.7 脚手架加载流程
4.8 脚手架使用入门案例
需求: 要求用户访问"/elementUI" 访问 ElementUI的组件.
1) 定义ElementUI组件
2) 定义路由机制
3) 访问组件
地址: http://8080/#/elemetUI 路由的拦截的地址!!!
注意:如果ElementUI.vue组件中有导航守卫,把它注释掉,即可显示网页内容
4.9 修改端口号
五 总结
1.Node.js 是一个基于Chrome V8 引擎的 JavaScript 运行时.前端脚手架运行的一个平台,类比:java程序---tomcat服务器
2.脚手架-前端框架---类似于:java中的spring框架
3.VUE.JS---类似于:java代码
4.vue-cli---构建脚手架的一个客户端工具,以视图的方式直观的形式展现给用户,类似SqlYog
278
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
