1、关于路由说明
1.1 路由嵌套规则
说明：采用children属性来实现路由嵌套
<!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>
<!-- 路由占位符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>A级舔狗</h3>
</div>
</template>
<template id="biteTem">
<div>
<h3>SSS级舔狗</h3>
</div>
</template>
<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
子级的路由会在当前的路由占位符中进行展现
*/
//定义路由对象
let 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>
实现父子级的关系嵌套
2、京淘项目的搭建
2.1 京淘项目后台搭建
2.1.1 创建项目
2.1.2 导入pom.xml文件
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.5.2</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<properties>
<java.version>1.8</java.version>
<!-- 跳过测试类打包 -->
<skipTests>true</skipTests>
</properties>
<!-- 原则：按需导入 -->
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<!-- SpringBoot的启动项
再包内部 SpringBoot已经完成了项目的 "整合"
Web相当于导入的SpringMVC
-->
<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>
<!-- https://mvnrepository.com/artifact/org.projectlombok/lombok -->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</dependency>
<!--springBoot数据库连接 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-jdbc</artifactId>
</dependency>
<!-- 引入数据库驱动 -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<!-- 导入Mybatis-Plus jar包 -->
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.4.3</version>
</dependency>
</dependencies>
<!-- build：SpringBoot项目与Maven整合的插件
可以通过插件，执行项目的打包/测试/文档生成等操作
PS：该插件不能省略，省略该插件时 利用命令启动时报错，没有主清单信息
-->
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<version>2.5.2</version>
</plugin>
</plugins>
</build>
2.1.3 项目代码结构
2.1.4 代码测试
2.2 京淘项目前端搭建
2.2.1 node.js安装
- List item
安装成功之后的效果
2.2.2 安装VUE客户端程序
npm是node.js安装软件/环境工具
配置淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.org
安装VUE客户端：命令：npm install -g @vue/cli --force
安装成功后的效果：
2.2.3 导入前端项目
- 找到自己磁盘盘中的前端项目
- 编辑项目路径 编辑成功后导入项目即可
- 引入成功之后启动服务
2.4 关于脚手架框架说明
2.4.1 打开项目
说明由于脚手架其中需要编辑HTML/CSS/JS 所以需要利用Hbuilder进行打开.
- 查看项目位置
2. 利用hubilder软件打开.即可
2.4.2 什么是脚手架
原来写前端代码时 需要自己手动维护html/css/js. 并且如果文件如果很多 缺乏一种统一的方式进行管理.
可以向后端代码一样Controller/Service/Mapper 将代码进行分层管理. 前端仿照后端 开发了一个脚手架项目结构.
2.4.3 脚手架结构分析
- 代码结构
2.4.4 正确理解.vue文件
知识复习：
- 组件 HTML/CSS/JS 这些都可以封装到组件中
- 重点：在脚手架中 xxx.vue 代表一个组件
2.4.5 整理main.js
总结：main.js的作用
- 导入整个项目中的所有JS
- 实例化VUE对象
- 通过实例化的VUE对象渲染程序
2.4.5.1 引入组件/插件/JS
//import表示导入规则 导入vue.js 并且命名为Vue
import Vue from 'vue'
import App from './App.vue'
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.4.5.2 环境设定
/* 导入axios包 */
import axios from 'axios'
/* 设定axios的请求根目录 */
axios.defaults.baseURL = 'http://localhost:8091/'
/* 向vue对象中添加全局对象 以后发送ajax请求使用$http对象 */
Vue.prototype.$http = axios
Vue.config.productionTip = false
2.4.5.3 初始化VUE对象
- 传统VUE对象的创建方式
//需要vue对象 进行挂载
const app = new Vue({
//通过el 指定VUE对象渲染元素的区域.
el: "#app",
//vue对象挂载路由
//router: router
//如果key=value 则使用key代替
router
})
- 脚手架中的写法
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')
2.4.6 关于脚手架路由规范
- 路由占位符位置
说明：根据用户路由地址之后在该区域展现组件信息
- 路由规则
引入规范：import VueRouter from ‘vue-router’
- 路由策略
import Vue from 'vue'
import VueRouter from 'vue-router'
// 引入指定的路由组件
import Login from '../components/Login.vue'
import ElementUI from '../components/ElementUI.vue'
//使用路由机制
Vue.use(VueRouter)
const routes = [
{path: '/', redirect: '/login'},
{path: '/login', component: Login},
{path: '/elementUI', component: ElementUI}
]
const router = new VueRouter({
routes
})
export default router
2.4.7 脚手架加载流程
2.4.8 脚手架入门案例
需求：要求用户访问"/elementUI" 访问 ElementUI的组件
2.4.8.1 定义ElementU 组件
2.4.8.2 定义路由机制
2.4.8.3 访问组件
URL：http://8080/#/elemetUI 路由的拦截的地址!!!
3、总结
- Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时。 前端脚手架运行的一个平台
类比: java程序 -----tomcat服务器. - 脚手架 前端框架 类似于: java中的 spring框架
- VUE.JS 类似于: java代码
- vue-cli 构建脚手架的一个客户端工具 以视图的方式直观的给用户展现.
类比: SqlYog!!!
扫一扫
1428
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
