CGB2105-Day10

最新推荐文章于 2024-02-11 19:31:18 发布
最新推荐文章于 2024-02-11 19:31:18 发布
阅读量4k 收藏 21
点赞数 4
分类专栏： 2105
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_16804847/article/details/119344081
版权

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>白色的狗狗</h3>
			</div>
		</template>
		
		<template id="biteTem">
			<div>
				<h3>一只凶猛的狗</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文件

 <!--1.parent标签  2.依赖信息  3.build插件-->
    <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>
            <!--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>

        <!--添加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>

2.1.3 后台代码结构

说明: 根据码云中的代码结构完成 项目构建
在这里插入图片描述

2.1.4 代码测试

在这里插入图片描述

2.1.5 后台启动项配置

1.选择 edit config…
在这里插入图片描述

在这里插入图片描述

2.2 京淘前端搭建

2.2.1 node.js安装

脚手架安装教程

安装成功之后效果:
在这里插入图片描述

2.2.2 安装VUE 客户端程序

npm是node 安装软件/环境的工具.
配置淘宝镜像: 1).npm install -g cnpm --registry=https://registry.npm.taobao.org
安装VUE客户端: 命令: npm install -g @vue/cli --force
安装成功后的效果:
在这里插入图片描述

2.2.3 导入前端项目

1). 找到前端项目文件
在这里插入图片描述
2).导入前端项目
在这里插入图片描述
3. 编辑路径 编辑成功之后,导入项目即可
在这里插入图片描述
4.项目运行
引入项目之后,启动服务.
在这里插入图片描述
5. 终止程序.
在这里插入图片描述

2.3 手动安装脚手架

2.3.1 注意事项

如果通过鼠标点击DOS命令窗口, 则DOS命令窗口可能出于锁定的状态. 通过ctrl+c的形式 解除锁定
报错说明: 只剩一个报错信息
1.则关闭客户端重启.
2.重新导入src文件
3.如果上述的操作还不能解决
3.1 直接导入我的项目 jtadmin
3.2 将上述的操作 重复执行
在这里插入图片描述

关闭校验: 将原来的true 改为false
在这里插入图片描述

2.4 关于脚手架框架说明

2.4.1 打开项目

说明由于脚手架其中需要编辑HTML/CSS/JS 所以需要利用Hbuilder进行打开.
1).查看项目位置
在这里插入图片描述
2. 利用hubilder软件打开.即可
在这里插入图片描述

2.4.2 什么是脚手架

原来写前端代码时 需要自己手动维护html/css/js. 并且如果文件如果很多 缺乏一种统一的方式进行管理.
可以向后端代码一样Controller/Service/Mapper 将代码进行分层管理. 前端仿照后端 开发了一个脚手架项目结构.

2.4.3 脚手架结构分析

  1. 代码结构
    在这里插入图片描述

2.4.4 正确理解.vue文件

知识复习:
1. 组件 HTML/CSS/JS 这些都可以封装到组件中.
2. ** 重点:在脚手架中 xxx.vue 代表一个组件 **
在这里插入图片描述

2.4.5 理解main.js

总结: main.js作用
1.导入整个项目中所用到的js.
2.实例化VUE对象
3.通过实例化的VUE对象渲染程序.

2.4.5.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.4.5.2 环境设定
/* 导入axios js */
import axios from 'axios'
/* 设定axios的请求根目录 设定服务器请求网址 */
axios.defaults.baseURL = 'http://localhost:8091/'
/*方便其他JS调用Axios,则将变量定义为全局变量
	Vue.prototype:定义全局变量 命名为: $http
*/
Vue.prototype.$http = axios

Vue.config.productionTip = false
2.4.5.3 初始化VUE对象
  1. 传统的VUE对象的创建方式
		//需要vue对象 进行挂载
		const app = new Vue({
			//通过el 指定VUE对象渲染元素的区域.
			el: "#app",
			//vue对象挂载路由
			//router: router
			//如果key=value 则使用key代替
			router
		})
  1. 脚手架中的写法:
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 关于脚手架路由规范

  1. 路由占位符位置
    说明: 根据用户路由地址之后在该区域展现组件信息.
    在这里插入图片描述
  2. 路由规则
    引入规范: import router from ‘./router’
    在这里插入图片描述
  3. 路由策略
    在这里插入图片描述

2.4.7 脚手架加载流程

在这里插入图片描述

2.4.8 脚手架使用入门案例

需求: 要求用户访问"/elementUI" 访问 ElementUI的组件.

2.4.8.1 定义ElementUI组件

在这里插入图片描述

2.4.8.2 定义路由机制

在这里插入图片描述

2.4.8.3 访问组件

地址: http://8080/#/elemetUI 路由的拦截的地址!!!
在这里插入图片描述

3.总结

  1. Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时。 前端脚手架运行的一个平台
    类比: java程序 -----tomcat服务器.
  2. 脚手架 前端框架 类似于: java中的 spring框架
  3. VUE.JS 类似于: java代码
  4. vue-cli 构建脚手架的一个客户端工具 以视图的方式直观的给用户展现.
    类比: SqlYog!!!

4. 作业:

  1. 预习ElementUI 网址: https://element.eleme.cn/#/zh-CN

5 晚自习串讲

5.1 路由导航守卫问题

说明: 目前的课程不需要路由导航守卫 应该将路由中的 index.js 删除路由导航守卫(权限!!!)
在这里插入图片描述

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

5.2 修改前端服务器端口号

启动旁边有个参数的选项
在这里插入图片描述

闪耀太阳
关注
专栏目录
cgb2106-day10
cgblpx的博客
08-06 4339
标题
cgb2106-day11
cgblpx的博客
08-09 5181
标题
vue.js建立主页的路由 - 另类的实现方式
草巾冒小子的博客
12-27 772
代码如下： // src/router/index.js 相关配置 import Vue from 'vue' import Router from 'vue-router' import VueResource from 'vue-resource' import HelloWorld from '@/components/HelloWorld' Vue.use(Router) Vue.u...
（已解决）Vue routes的 children使用（小白来看，包会！）
最新发布
BrianGriffin的博客
02-11 2941
使用了很多vue深层知识，简化并且做到自己的项目上面对小白很有帮助，因为我就是小白，才搞明白。最核心的就是routes的 children使用，所以先做一个例子再套用进去。
vue-router 路由超详细教程
热门推荐
weixin_47124112的博客
09-06 4万+
路由（英文： router）就是对应关系Hash 地址与组件之间的对应关系。vue-router是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目中组件的切换。vue-router 的官方文档地址：https://router.vuejs.org/zh/2. vue-router 安装和配置的步骤① 安装 vue-router 包② 创建路由模块③ 导入并挂载路由模块④ 声明路由链接和占位符2.1在项目中安装 vue-router。
vue router children 路由变了 组件没变_Vue-Router和React-Router对比
weixin_39551611的博客
12-08 190
目录：前端路由本质Vue-Router和React-Router本质区别Vue-Router和React-Router使用差异Vue-Router● hash: 使用 URL hash 值来作路由。默认模式。● history: 依赖 HTML5 History API 和服务器配置。查看 HTML5 History 模式。● abstract: 支持所有 JavaScript 运行环境，如 No...
二级路由/router嵌套 children
m0_74425621的博客
04-01 139
{ 父级路由 , children: [ { 子路由1 } , { 子路由2 } ] }
CGB2011-DAY13-14.html
03-30
CGB2011-DAY13-14.html
CGB2011-DAY02.html
03-12
CGB2011-DAY02.html
cgb2106-day12
cgblpx的博客
08-10 5921
标题
cgb2106-day02
cgblpx的博客
07-27 5818
标题
Vue前端项目-首页-实现首页路由重定向
踏 浪的博客
04-02 4542
目录 1、创建首页组件 2、修改路由 3、在 AppMain组件中设置路由占位符 实现效果: 1、创建首页组件 新建 src / views / index.vue 组件, 内容 <template> <div class=""> <h1>这是index 首页</h1> </div> </temp...
vue router children 路由变了 组件没变_动态路由（vue）
weixin_39589923的博客
12-12 723
前言 以前我在做单页面应用时，由于静态页面资源都是打包扔在 nginx 上的，而 nginx 只作为流量接入层，也没法写业务逻辑，使之产品提出特定页面需要指定用户才能访问的功能时，基于“经验”限制，我只能举白旗。后果就是，用户可以“自由”通过链接看到非预期的页面内容，虽然我们可以通过后端接口的数据限制，或者页面加载后的二次强跳转使“流程回归正常”，不过页面加载后的一次重新加载体验总不是很...
vue-router的嵌套使用（children），实现页中页效果
weixin_47886687的博客
11-01 1834
我们所看到的页面实际都是直接或间接由APP.vue根组件映射出来的 嵌套的组件需要嵌套的路由来映射，配置好父路由后，需要在哪个路由页面里面映射，就在哪个父路由添加children属性。 步骤一：配置完父路由后添加子路由 vue-----路由（router）的全局配置。 需要注意的细节：children里面的path不需要加“/”，以斜杠开头会被当做根路径 children 配置就是像 routes 配置一样的路由配置数组，可以嵌套多层路由。 { // 父路由 .
vue登录页和主页路由配置问题
weixin_30532837的博客
07-02 6359
登录页和主菜单首页是同一级的，都是用一个router-view，对于home页面里还有菜单，这里边还可以再增加一个router-view，那么在配置时候就是在home的路径增加个children路径配置。home指向子菜单下默认菜单用 redirect: "homea" 。登陆后js动态跳转用this.$router.push('/') 例子： ...
React Router 4 使用实例和api详解
@黄小泽的个人博客
12-06 2679
React Router 主要使用场景是单页面富应用(SPA)。实现有两种，一种是利用url的hash，就是常说的锚点(#)，JavaScript通过hashChange事件来监听url的改变；另一种是HTML5的History模式，它使url看起来像普通网站那样，以“ / ”分割，没有#，不过这种模式需要服务端支持，当url所指向的位置在服务端中目录结构错误时，将报404。 React Rou...
vue router children 不正常显示问题
luckydog
09-22 4456
{ path: '/home', component: () => import('../views/home/home.vue'), children: [ { path: '', name: 'home', component: () => import('../views/home/home.vue'), }, { path: 'sub', name.
H3CGB0-190试题解析：数据链路层与网络设备
"GBO-190题库包含与数据链路层相关的设备识别、光纤类型理解、IP地址处理、TCP连接建立、FTP协议端口、操作系统启动配置、MTU检测、交换机STP状态判断以及STP协议在交换网络中的应用等内容。" ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

闪耀太阳

感觉文章不错的记得打赏呀

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值