Three stage CGB2105-Day10

Keywords: Java

CGB2105-Day10

Shining sun 2021-08-03 10:51:10

2912

Category column: 2105

2105 The column contains this content

17 articles 26 subscriptions

1. Description of routing

1.1 routing nesting rules

Note: the children attribute is used to realize route nesting

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Introduction to routing</title>
	</head>
	<body>
		<div id="app">
			<!-- 1.Define route -->
			<router-link to="/user">user</router-link>
			<router-link to="/dog">Dog</router-link>
		<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> Route placeholder<span class="token class-name">A</span> <span class="token operator">--</span><span class="token operator">&gt;</span>
		<span class="token operator">&lt;</span>router<span class="token operator">-</span>view<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>router<span class="token operator">-</span>view<span class="token operator">&gt;</span>
	<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
	
	<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> Define template labels <span class="token operator">--</span><span class="token operator">&gt;</span>
	<span class="token operator">&lt;</span>template id<span class="token operator">=</span><span class="token string">"userTem"</span><span class="token operator">&gt;</span>
		<span class="token generics"><span class="token punctuation">&lt;</span>div<span class="token punctuation">&gt;</span></span>
			<span class="token generics"><span class="token punctuation">&lt;</span>h1<span class="token punctuation">&gt;</span></span>Define user components<span class="token operator">&lt;</span><span class="token operator">/</span>h1<span class="token operator">&gt;</span>
		<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
	<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>
	
	<span class="token operator">&lt;</span>template id<span class="token operator">=</span><span class="token string">"dogTem"</span><span class="token operator">&gt;</span>
		<span class="token generics"><span class="token punctuation">&lt;</span>div<span class="token punctuation">&gt;</span></span>
			<span class="token generics"><span class="token punctuation">&lt;</span>h1<span class="token punctuation">&gt;</span></span>Define pet components<span class="token operator">&lt;</span><span class="token operator">/</span>h1<span class="token operator">&gt;</span>
			<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> get ready<span class="token number">2</span>Components  <span class="token operator">--</span><span class="token operator">&gt;</span>
			<span class="token operator">&lt;</span>router<span class="token operator">-</span>link <span class="token keyword">to</span><span class="token operator">=</span><span class="token string">"/samo"</span><span class="token operator">&gt;</span>Samoye<span class="token operator">&lt;</span><span class="token operator">/</span>router<span class="token operator">-</span>link<span class="token operator">&gt;</span>
			<span class="token operator">&lt;</span>router<span class="token operator">-</span>link <span class="token keyword">to</span><span class="token operator">=</span><span class="token string">"/bite"</span><span class="token operator">&gt;</span>American Pit Bull Terrier<span class="token operator">&lt;</span><span class="token operator">/</span>router<span class="token operator">-</span>link<span class="token operator">&gt;</span>
			<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> Define route placeholder<span class="token class-name">B</span> <span class="token operator">--</span><span class="token operator">&gt;</span>
			<span class="token operator">&lt;</span>router<span class="token operator">-</span>view<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>router<span class="token operator">-</span>view<span class="token operator">&gt;</span>
		<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
	<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>
	
	<span class="token operator">&lt;</span>template id<span class="token operator">=</span><span class="token string">"samoTem"</span><span class="token operator">&gt;</span>
		<span class="token generics"><span class="token punctuation">&lt;</span>div<span class="token punctuation">&gt;</span></span>
			<span class="token generics"><span class="token punctuation">&lt;</span>h3<span class="token punctuation">&gt;</span></span>White dog<span class="token operator">&lt;</span><span class="token operator">/</span>h3<span class="token operator">&gt;</span>
		<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
	<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>
	
	<span class="token operator">&lt;</span>template id<span class="token operator">=</span><span class="token string">"biteTem"</span><span class="token operator">&gt;</span>
		<span class="token generics"><span class="token punctuation">&lt;</span>div<span class="token punctuation">&gt;</span></span>
			<span class="token generics"><span class="token punctuation">&lt;</span>h3<span class="token punctuation">&gt;</span></span>A fierce dog<span class="token operator">&lt;</span><span class="token operator">/</span>h3<span class="token operator">&gt;</span>
		<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
	<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>
	
	<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"../js/vue.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
	<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"../js/vue-router.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
	<span class="token generics"><span class="token punctuation">&lt;</span>script<span class="token punctuation">&gt;</span></span>
			
			let userCom <span class="token operator">=</span> <span class="token punctuation">{<!-- --></span>
				template<span class="token operator">:</span> <span class="token string">"#userTem"</span>
			<span class="token punctuation">}</span>
			
			let dogCom <span class="token operator">=</span> <span class="token punctuation">{<!-- --></span>
				template<span class="token operator">:</span> <span class="token string">"#dogTem"</span>
			<span class="token punctuation">}</span>
			
			let samoCom <span class="token operator">=</span> <span class="token punctuation">{<!-- --></span>
				template<span class="token operator">:</span> <span class="token string">"#samoTem"</span>
			<span class="token punctuation">}</span>
			
			let biteCom <span class="token operator">=</span> <span class="token punctuation">{<!-- --></span>
				template<span class="token operator">:</span> <span class="token string">"#biteTem"</span>
			<span class="token punctuation">}</span>
			
			
			
			<span class="token comment">/* Description of routing problem:
				 If routing nesting is required, children should be used 
				 The routes of children will be displayed in the current route placeholder
			 */</span>
			<span class="token comment">//Define routing objects</span>
			let router <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">VueRouter</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
				routes<span class="token operator">:</span> <span class="token punctuation">[</span>
					<span class="token punctuation">{<!-- --></span>path<span class="token operator">:</span> <span class="token string">"/user"</span><span class="token punctuation">,</span> component<span class="token operator">:</span> userCom<span class="token punctuation">}</span><span class="token punctuation">,</span>
					<span class="token punctuation">{<!-- --></span>path<span class="token operator">:</span> <span class="token string">"/dog"</span><span class="token punctuation">,</span> component<span class="token operator">:</span> dogCom<span class="token punctuation">,</span> children<span class="token operator">:</span><span class="token punctuation">[</span>
						<span class="token punctuation">{<!-- --></span>path<span class="token operator">:</span> <span class="token string">"/samo"</span><span class="token punctuation">,</span> component<span class="token operator">:</span> samoCom<span class="token punctuation">}</span><span class="token punctuation">,</span>
						<span class="token punctuation">{<!-- --></span>path<span class="token operator">:</span> <span class="token string">"/bite"</span><span class="token punctuation">,</span> component<span class="token operator">:</span> biteCom<span class="token punctuation">}</span>
					<span class="token punctuation">]</span><span class="token punctuation">}</span>
				<span class="token punctuation">]</span>
			<span class="token punctuation">}</span><span class="token punctuation">)</span>
			
			<span class="token comment">//The vue object needs to be mounted</span>
			<span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
				el<span class="token operator">:</span> <span class="token string">"#app"</span><span class="token punctuation">,</span>
				<span class="token comment">//vue object mount routing</span>
				router<span class="token operator">:</span> router
			<span class="token punctuation">}</span><span class="token punctuation">)</span>
	<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>body<span class="token operator">&gt;</span>

</html>

Nested structure for parent-child relationship:

2. Construction of Jingtao project

2.1 background construction of Beijing Taobao project

2.1.1 create project

2.1.2 import pom.xml file

 <!--1.parent Label 2.Dependent information 3.build plug-in unit-->
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.5.2</version>
        <relativePath/>
    </parent>
<span class="token generics"><span class="token punctuation">&lt;</span>properties<span class="token punctuation">&gt;</span></span>
    <span class="token generics"><span class="token punctuation">&lt;</span>java<span class="token punctuation">.</span>version<span class="token punctuation">&gt;</span></span><span class="token number">1.8</span><span class="token operator">&lt;</span><span class="token operator">/</span>java<span class="token punctuation">.</span>version<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span>Skip test class packaging<span class="token operator">--</span><span class="token operator">&gt;</span>
    <span class="token generics"><span class="token punctuation">&lt;</span>skipTests<span class="token punctuation">&gt;</span></span><span class="token boolean">true</span><span class="token operator">&lt;</span><span class="token operator">/</span>skipTests<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>properties<span class="token operator">&gt;</span>

<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span>principle<span class="token operator">:</span> Import on demand  <span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token generics"><span class="token punctuation">&lt;</span>dependencies<span class="token punctuation">&gt;</span></span>
    <span class="token generics"><span class="token punctuation">&lt;</span>dependency<span class="token punctuation">&gt;</span></span>
        <span class="token generics"><span class="token punctuation">&lt;</span>groupId<span class="token punctuation">&gt;</span></span>org<span class="token punctuation">.</span>springframework<span class="token punctuation">.</span>boot<span class="token operator">&lt;</span><span class="token operator">/</span>groupId<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span>springboot Startup item<span class="token punctuation">(</span>implement<span class="token punctuation">)</span>Inside the package<span class="token class-name">SpringBoot</span>
        The of the project has been completed<span class="token string">"integration"</span><span class="token punctuation">(</span>to configure<span class="token punctuation">)</span> The user takes it and uses it
        web Import<span class="token class-name">SpringMVC</span>
        <span class="token operator">--</span><span class="token operator">&gt;</span>
        <span class="token generics"><span class="token punctuation">&lt;</span>artifactId<span class="token punctuation">&gt;</span></span>spring<span class="token operator">-</span>boot<span class="token operator">-</span>starter<span class="token operator">-</span>web<span class="token operator">&lt;</span><span class="token operator">/</span>artifactId<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>dependency<span class="token operator">&gt;</span>

    <span class="token generics"><span class="token punctuation">&lt;</span>dependency<span class="token punctuation">&gt;</span></span>
        <span class="token generics"><span class="token punctuation">&lt;</span>groupId<span class="token punctuation">&gt;</span></span>org<span class="token punctuation">.</span>springframework<span class="token punctuation">.</span>boot<span class="token operator">&lt;</span><span class="token operator">/</span>groupId<span class="token operator">&gt;</span>
        <span class="token generics"><span class="token punctuation">&lt;</span>artifactId<span class="token punctuation">&gt;</span></span>spring<span class="token operator">-</span>boot<span class="token operator">-</span>starter<span class="token operator">-</span>test<span class="token operator">&lt;</span><span class="token operator">/</span>artifactId<span class="token operator">&gt;</span>
        <span class="token generics"><span class="token punctuation">&lt;</span>scope<span class="token punctuation">&gt;</span></span>test<span class="token operator">&lt;</span><span class="token operator">/</span>scope<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>dependency<span class="token operator">&gt;</span>

    <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span>Support hot deployment <span class="token operator">--</span><span class="token operator">&gt;</span>
    <span class="token generics"><span class="token punctuation">&lt;</span>dependency<span class="token punctuation">&gt;</span></span>
        <span class="token generics"><span class="token punctuation">&lt;</span>groupId<span class="token punctuation">&gt;</span></span>org<span class="token punctuation">.</span>springframework<span class="token punctuation">.</span>boot<span class="token operator">&lt;</span><span class="token operator">/</span>groupId<span class="token operator">&gt;</span>
        <span class="token generics"><span class="token punctuation">&lt;</span>artifactId<span class="token punctuation">&gt;</span></span>spring<span class="token operator">-</span>boot<span class="token operator">-</span>devtools<span class="token operator">&lt;</span><span class="token operator">/</span>artifactId<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>dependency<span class="token operator">&gt;</span>

    <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span>add to lombok rely on<span class="token operator">--</span><span class="token operator">&gt;</span>
    <span class="token generics"><span class="token punctuation">&lt;</span>dependency<span class="token punctuation">&gt;</span></span>
        <span class="token generics"><span class="token punctuation">&lt;</span>groupId<span class="token punctuation">&gt;</span></span>org<span class="token punctuation">.</span>projectlombok<span class="token operator">&lt;</span><span class="token operator">/</span>groupId<span class="token operator">&gt;</span>
        <span class="token generics"><span class="token punctuation">&lt;</span>artifactId<span class="token punctuation">&gt;</span></span>lombok<span class="token operator">&lt;</span><span class="token operator">/</span>artifactId<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>dependency<span class="token operator">&gt;</span>

    <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span>Introducing database driver <span class="token operator">--</span><span class="token operator">&gt;</span>
    <span class="token generics"><span class="token punctuation">&lt;</span>dependency<span class="token punctuation">&gt;</span></span>
        <span class="token generics"><span class="token punctuation">&lt;</span>groupId<span class="token punctuation">&gt;</span></span>mysql<span class="token operator">&lt;</span><span class="token operator">/</span>groupId<span class="token operator">&gt;</span>
        <span class="token generics"><span class="token punctuation">&lt;</span>artifactId<span class="token punctuation">&gt;</span></span>mysql<span class="token operator">-</span>connector<span class="token operator">-</span>java<span class="token operator">&lt;</span><span class="token operator">/</span>artifactId<span class="token operator">&gt;</span>
        <span class="token generics"><span class="token punctuation">&lt;</span>scope<span class="token punctuation">&gt;</span></span>runtime<span class="token operator">&lt;</span><span class="token operator">/</span>scope<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>dependency<span class="token operator">&gt;</span>

    <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span>springBoot Database connection  <span class="token operator">--</span><span class="token operator">&gt;</span>
    <span class="token generics"><span class="token punctuation">&lt;</span>dependency<span class="token punctuation">&gt;</span></span>
        <span class="token generics"><span class="token punctuation">&lt;</span>groupId<span class="token punctuation">&gt;</span></span>org<span class="token punctuation">.</span>springframework<span class="token punctuation">.</span>boot<span class="token operator">&lt;</span><span class="token operator">/</span>groupId<span class="token operator">&gt;</span>
        <span class="token generics"><span class="token punctuation">&lt;</span>artifactId<span class="token punctuation">&gt;</span></span>spring<span class="token operator">-</span>boot<span class="token operator">-</span>starter<span class="token operator">-</span>jdbc<span class="token operator">&lt;</span><span class="token operator">/</span>artifactId<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>dependency<span class="token operator">&gt;</span>

    <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span>Import MP After package<span class="token punctuation">,</span>Delete original<span class="token class-name">Mybatis</span>My bag <span class="token operator">--</span><span class="token operator">&gt;</span>
    <span class="token generics"><span class="token punctuation">&lt;</span>dependency<span class="token punctuation">&gt;</span></span>
        <span class="token generics"><span class="token punctuation">&lt;</span>groupId<span class="token punctuation">&gt;</span></span>com<span class="token punctuation">.</span>baomidou<span class="token operator">&lt;</span><span class="token operator">/</span>groupId<span class="token operator">&gt;</span>
        <span class="token generics"><span class="token punctuation">&lt;</span>artifactId<span class="token punctuation">&gt;</span></span>mybatis<span class="token operator">-</span>plus<span class="token operator">-</span>boot<span class="token operator">-</span>starter<span class="token operator">&lt;</span><span class="token operator">/</span>artifactId<span class="token operator">&gt;</span>
        <span class="token generics"><span class="token punctuation">&lt;</span>version<span class="token punctuation">&gt;</span></span><span class="token number">3.4</span><span class="token number">.3</span><span class="token operator">&lt;</span><span class="token operator">/</span>version<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>dependency<span class="token operator">&gt;</span>

<span class="token operator">&lt;</span><span class="token operator">/</span>dependencies<span class="token operator">&gt;</span>

<span class="token generics"><span class="token punctuation">&lt;</span>build<span class="token punctuation">&gt;</span></span>
    <span class="token generics"><span class="token punctuation">&lt;</span>plugins<span class="token punctuation">&gt;</span></span>
        <span class="token generics"><span class="token punctuation">&lt;</span>plugin<span class="token punctuation">&gt;</span></span>
            <span class="token generics"><span class="token punctuation">&lt;</span>groupId<span class="token punctuation">&gt;</span></span>org<span class="token punctuation">.</span>springframework<span class="token punctuation">.</span>boot<span class="token operator">&lt;</span><span class="token operator">/</span>groupId<span class="token operator">&gt;</span>
            <span class="token generics"><span class="token punctuation">&lt;</span>artifactId<span class="token punctuation">&gt;</span></span>spring<span class="token operator">-</span>boot<span class="token operator">-</span>maven<span class="token operator">-</span>plugin<span class="token operator">&lt;</span><span class="token operator">/</span>artifactId<span class="token operator">&gt;</span>
            <span class="token generics"><span class="token punctuation">&lt;</span>version<span class="token punctuation">&gt;</span></span><span class="token number">2.5</span><span class="token number">.2</span><span class="token operator">&lt;</span><span class="token operator">/</span>version<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>plugin<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>plugins<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>build<span class="token operator">&gt;</span>

2.1.3 background code structure

Note: complete the project construction according to the code structure in the code cloud

2.1.4 code test

2.1.5 background startup item configuration

1. Select edit config

2.2 Jingtao front end construction

2.2.1 node.js installation

Scaffold installation tutorial

Effect after successful installation:

2.2.2 install VUE client program

npm is a tool for node to install software / environment
Configure Taobao image: 1).npm install -g cnpm --registry=https://registry.npm.taobao.org
Install VUE client: Command: npm install -g @vue/cli --force
Effect after successful installation:

2.2.3 import front end items

1) . find the front-end project file

2) . import front end project

3. After editing the path successfully, import the project

4. Project operation
After the project is introduced, start the service

5. Termination procedure

2.3 manual installation of scaffold

2.3.1 precautions

If you click the DOS command window with the mouse, the DOS command window may be locked. Unlock it by ctrl+c
Error reporting Description: there is only one error reporting information left
1. Then close the client and restart
2. Re import the src file
3. If the above operation cannot be solved
3.1 import my project jtadmin directly
3.2 repeat the above operations

Turn off verification: change the original true to false

2.4 description of scaffold frame

2.4.1 open project

Note: because the scaffold needs to edit HTML/CSS/JS, it needs to be opened with Hbuilder
1) . view project location

2. Open it with hubilder software

2.4.2 what is scaffold

Originally, when writing front-end code, you need to manually maintain html/css/js. If there are many files, there is a lack of a unified way to manage them
Like the back-end code, Controller/Service/Mapper can manage the code hierarchically. The front-end has developed a scaffolding project structure modeled on the back-end

2.4.3 scaffold structure analysis

Code structure

2.4.4 correctly understand. vue files

Knowledge review:
1. HTML/CSS/JS components can be encapsulated into components
2. * * key point: xxx.vue represents a component in the scaffold**

2.4.5 understanding main.js

Summary: main.js function
1. Import js used in the whole project
2. Instantiate VUE object
3. Render the program through the instantiated VUE object

2.4.5.1. Import components / plug-ins / JS

//Import means that the import rule imports vue.js and is named Vue
import Vue from 'vue'
import App from './App.vue'
//Import route.js
import router from './router'
import './plugins/element.js'
import './assets/css/global.css'
import './assets/ali-icon/iconfont.css'
/* Import rich text editor */
import VueQuillEditor from 'vue-quill-editor'

/*Import the style corresponding to the rich text 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 environment setting

/* Import axios js */
import axios from 'axios'
/* Set the request root directory of axios and set the server request URL */
axios.defaults.baseURL = 'http://localhost:8091/'
/*If it is convenient for other JS to call Axios, the variable is defined as a global variable
	Vue.prototype:Define a global variable named: $http
*/
Vue.prototype.$http = axios

Vue.config.productionTip = false

2.4.5.3 initializing VUE objects

Traditional VUE object creation method

		//The vue object needs to be mounted
		const app = new Vue({
			//By el specifying the area where VUE objects render elements
			el: "#app",
			//vue object mount routing
			//router: router
			//If key=value, use key instead
			router
		})

Writing in scaffold:

1.Introduction component
import App from './App.vue'
2.Define default DIV
<template>
  <div id="app">
      <!-- Add route placeholder-->
      <router-view></router-view>
  </div>
</template>

//3. Find the specified xxx.vue file and the specified DIV for rendering
new Vue({
//Introduce routing mechanism
router,
render: h => h(App)
}).$mount('#app')

2.4.6 specification for scaffold routing

Route placeholder location
Note: the component information is displayed in this area according to the user's routing address
Routing rules
import router from '. / router'
Routing policy

2.4.7 scaffold loading process

2.4.8 introduction to scaffold

Requirement: the user is required to access "/ ElementUI" to access the components of ElementUI

2.4.8.1 defining ElementUI components

2.4.8.2 define routing mechanism

2.4.8.3 access components

Address: http://8080/#/elemetUI Intercepted address of route!!!

3. Summary

Node.js is a JavaScript runtime based on the Chrome V8 engine. A platform on which the front scaffold runs
Analogy: java program - tomcat server
The scaffold front-end framework is similar to the spring framework in java
VUE.JS is similar to: java code
Vue cli is a client tool for building scaffolding, which is intuitively displayed to users in the way of view
Analogy: SqlYog!!!

4. Operation:

Preview ElementUI website: https://element.eleme.cn/#/zh-CN

5-night self-study and lecture

5.1 routing navigation guard problem

Note: the route navigation guard is not required in the current course. The index.js in the route should be deleted from the route navigation guard (permission!!!)

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue'
import ElementUI from '../components/ElementUI.vue'
//Using routing mechanism
Vue.use(VueRouter)
const routes = [
  {path: '/', redirect: '/login'},
  {path: '/login', component: Login},
  {path: '/elementUI', component: ElementUI}
]

//Route navigation guard!!!

const router = new VueRouter({
routes
})

export default router

5.2 modify the front-end server port number

There is an option with a parameter next to startup

Posted by Nugen on Tue, 28 Sep 2021 10:19:41 -0700

Programmer Group