step03day10京淘项目搭建及相关知识_京淘项目构建-CSDN博客

 <!--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>
            <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>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter</artifactId>
        </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 后台代码结构

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

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
<template>
  <div id="app">
      <!-- 添加路由占位符-->
      <router-view></router-view>
  </div>
</template>

//3. 找到指定的xxx.vue文件, 找到指定的DIV进行渲染.
new Vue({
	  //引入路由的机制
	  router,
	  render: h => h(App)
	}).$mount('#app')