step03day10京淘项目搭建及相关知识

目录

1.后端项目搭建

1.1 创建项目

1.2 后端配置文件

1.3 后台代码结构

 1.4 测试后端代码

 1.5 后端代码说明

2.京淘项目前端搭建

2.1京淘前端搭建

2.2.1 node.js安装

2.2.2 安装VUE 客户端程序

2.2导入或创建前端项目

2.2.1导入项目

2.3.2 创建前端项目

2.3 手动安装脚手架

2.3.1 注意事项

2.4 关于脚手架框架说明

2.4.1 打开项目

2.4.2 什么是脚手架

2.4.3 脚手架结构分析

2.4.4 正确理解.vue文件

2.4.5理解main.js

2.4.6关于路由的规范问题

​2.4.7 脚手架加载流程

2.4.8 脚手架使用入门案例

#3.总结

#4 作业

---

---

1.后端项目搭建

1.1 创建项目

创建京淘项目SpringBoot--demo--jt

过程：略

1.2 后端配置文件

 
    
        org.springframework.boot
        spring-boot-starter-parent
        2.5.2
        
    

    
        1.8
        
        true
    

    
        
            org.springframework.boot
            spring-boot-starter-web
        

        
            org.springframework.boot
            spring-boot-starter-test
            test
        

        
        
            org.springframework.boot
            spring-boot-devtools
        

        
        
            org.projectlombok
            lombok
        

        
        
            mysql
            mysql-connector-java
            runtime
        

        
        
            org.springframework.boot
            spring-boot-starter-jdbc
        

        
        
            com.baomidou
            mybatis-plus-boot-starter
            3.4.3
        
        
            org.springframework.boot
            spring-boot-starter
        

    

    
        
            
                org.springframework.boot
                spring-boot-maven-plugin
                2.5.2
            
        
    

1.3 后台代码结构

说明：根据码云的代码完成框架架构 

 1.4 测试后端代码

 1.5 后端代码说明

后端业务通过ssm经典的三大框架将后端数据从数据库联系调用到前端，通过页面的形式展现给用户，这个过程既是数据在计算机中的传递过程，数据传入网页后，我们还会对网页展现的数据进行一些渲染和修改，也就到达了靠近用户最近的一端——前端。

2.京淘项目前端搭建

2.1京淘前端搭建

2.2.1 node.js安装

参见博客:VUE后端管理插件安装_闪耀太阳的博客-CSDN博客

1.下载版本14.15.4(windows10和window7版本不同) 

2.修改路径后一路next直至完成

检测：当输入node -v  npm -p 命令出现以下界面，则说明node脚手架安装成功

 

 3.切换淘宝NPM库

npm config set registry https://registry.npm.taobao.org

正确结果如下：

 4.安装VUE和客户端
命令: npm install -g @vue/cli --force

失败则删除目录下，node_modules 重新安装，或者执行npm uninstall -g @vue/cli 卸载后重装

 成功则初始化界面进入下一步

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导入或创建前端项目

2.2.1导入项目

1). 找到前端项目文件

2).导入前端项目

3. 编辑路径 编辑成功之后,导入项目即可

4.项目运行  引入项目之后,启动服务.

5. 终止程序.

2.3.2 创建前端项目

参见博客；VUE后端管理插件安装_闪耀太阳的博客-CSDN博客

结果：

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 脚手架结构分析

代码结构

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
		})

2.脚手架中的写法:

1.引入 组件
import App from './App.vue'
2.定义默认DIV


//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的组件.

1 定义ElementUI组件

2 定义路由机制

3 访问组件   地址: http://8080/#/elemetUI 路由的拦截的地址!!!

3. 总结

1.Node.js是一个基于Chrome V8引擎的JavaScriprt的运行规范   前端脚手架运行的一个平台
类比: java程序 -----tomcat服务器.

2 脚手架 前端框架 类似于: java中的 spring框架

3.VUE.JS 类似于: java代码

4.vue-cli 构建脚手架的一个客户端工具 以视图的方式直观的给用户展现.  类比: SqlYog!!!