京淘项目搭建（一）

最新推荐文章于 2023-02-22 10:56:37 发布

AimerDaniil

最新推荐文章于 2023-02-22 10:56:37 发布

阅读量1.9k

点赞数

分类专栏：京东淘项目文章标签： vue node.js java spring boot maven

本文链接：https://blog.csdn.net/AimerDaniel/article/details/119347846

版权

京东淘项目专栏收录该内容

11 篇文章 1 订阅

订阅专栏

京淘项目搭建

一、京淘项目后台搭建

1、创建项目

在这里插入图片描述

2、导入pom.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.jt</groupId>
    <artifactId>jt</artifactId>
    <version>1.0-SNAPSHOT</version>

    <!--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>
                <configuration>
                    <fork>true</fork><!--热部署必须添加这个配置-->
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>

3、后台代码结构

在这里插入图片描述

4、启动服务，代码测试

在这里插入图片描述

5、后台启动项配置

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

二、京淘前端搭建

1、node.js安装

安装成功之后效果：
在这里插入图片描述
脚手架安装教程：

2、安装VUE 客户端程序

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

3、导入前端项目

3.1）找到前端项目文件

在这里插入图片描述

3.2）导入前端项目

在这里插入图片描述

3.3）编辑路径，编辑成功之后，导入项目即可

在这里插入图片描述

4、项目运行

引入项目之后，启动服务。
在这里插入图片描述

5、终止程序

在这里插入图片描述

三、手动安装脚手架

1、注意事项

如果通过鼠标点击DOS命令窗口，则DOS命令窗口可能出于锁定的状态，通过ctrl+c的形式，解除锁定

报错说明：只剩一个报错信息
1.则关闭客户端重启.
2.重新导入src文件
3.如果上述的操作还不能解决
3.1 直接导入我的项目 jtadmin
3.2 将上述的操作重复执行
在这里插入图片描述
关闭校验：将原来的true 改为false

四、关于脚手架框架说明

1、打开项目

说明：由于脚手架其中需要编辑HTML/CSS/JS，所以需要利用Hbuilder进行打开。

1.1）查看项目位置

在这里插入图片描述

1.2）利用hubilder软件打开即可

在这里插入图片描述

2、什么是脚手架

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

3、代码结构

在这里插入图片描述

4、正确理解.vue文件

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

5、理解main.js

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

5.1）引入组件/插件/JS

//import表示导入规则  导入vue.js  并且命名为Vue
import Vue from 'vue'

//导入App.vue组件，并且命名为App
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

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

5.3）初始化VUE对象

5.3.1）传统的VUE对象的创建方式

//需要vue对象 进行挂载
const app = new Vue({
//通过el 指定VUE对象渲染元素的区域.
	el: "#app",
	//vue对象挂载路由
	//router: router
	//如果key=value 则使用key代替
	router
	})

5.3.2）脚手架中VUE对象的写法

1.导入App.vue组件，并且命名为App
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')

6、关于脚手架路由规范

6.1）路由占位符位置

说明：根据用户路由地址之后在该区域展现组件信息。
在这里插入图片描述

6.2）路由规则

引入规范：import router from ‘./router’
在这里插入图片描述

6.3）路由策略

在这里插入图片描述

7、脚手架加载流程

在这里插入图片描述

8、脚手架使用入门案例

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

8.1）定义ElementUI组件

在这里插入图片描述

8.2）定义路由机制

在这里插入图片描述

8.3）访问组件

地址：http://8080/#/elemetUI 路由的拦截的地址!!!，其中#表示前端使用了路由功能
在这里插入图片描述

AimerDaniil

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
京淘项目搭建（一）

京淘项目搭建一、京淘项目后台搭建1、创建项目2、导入pom.xml文件<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/
复制链接

扫一扫