京淘项目的jt的完整演练＜二＞

5).切换淘宝NPM库
1).npm install -g cnpm --registry=https://registry.npm.taobao.org
方式2:
2).npm config set registry https://registry.npm.taobao.org (建议使用第二种)

6).检查镜像配置是否生效 npm config list

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

等待安装完成之后即可

2 报错说明

1).如果报错如下

方案1) .删除用户目录下的文件,之后重新安装. (删除文件不要删除目录)

方案2): 执行卸载命令 npm uninstall -g @vue/cli 之后重新安装

2 初始化VUE项目

2.1 初始化UI工程（这里就表示vue装好了）

2.2 选择VUE 创建项目

2.3 选择项目

选择:手动

2.4选择功能

选择ESLint+ StandardConfig

项目创建之后效果

3 初始化项目

3.1 安装插件

选择如图所示的插件进行安装

1).安装成功之后会提示配置插件选择手动导入

3.2 安装axios依赖

1).点击依赖项

2).安装运行依赖

3.3 添加依赖项

3.3.1 问题描述

3.3.2 安装开发依赖 less-loader

安装开发依赖 less-loader
npm install less-loader@5.0.0 版本太高不适用
在VUE项目的根目录启动执行安装命令

3.3.3安装开发依赖 less

3.4 安装运行时依赖富文本编辑器

通过客户端的方式安装
有时候可能比较慢,所以需要提前安装
源码网址: https://github.com/surmon-china/vue-quill-editor#readme
组件名称: vue-quill-editor

2.方式2 通过命令安装
命令: npm install vue-quill-editor --save

安装之后的效果

3.4.0 关闭ESLint校验

3.4.1 添加依赖方式

在main.js中添加该操作

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

Vue.use(VueQuillEditor, /* { default global options } */)

3.4.2 添加html 实现页面展现

 <el-tab-pane label="商品详情" name="4">
            <!-- 定义富文本编辑器-->
            <quill-editor ref="myQuillEditor" v-model="addItemForm.itemDesc" />

          </el-tab-pane>

效果展现

设置富文本编辑器宽度

3.5 安装运行依赖 echars插件

<template>
  <div>
    <!-- 定义卡片视图 -->
    <el-card>
      <el-row>
        <el-col><h1>数据统计</h1></el-col>
      </el-row>

     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
     <div id="main" style="width: 100%;height:600px;"></div>

    </el-card>

  </div>
</template>

<script>
  /* 导入echarts组件 */
  import * as echarts from 'echarts';


  export default {
    data() {
      return {

      }
    },
    created(){

    },
    //当页面dom对象初始化之后执行
    mounted(){
      var myChart = echarts.init(document.getElementById('main'));
      // 指定图表的配置项和数据
      var option = {
          title: {
              text: 'ECharts 入门示例'
          },
          tooltip: {},
          legend: {
              data:['销量']
          },
          xAxis: {
              data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
          },
          yAxis: {},
          series: [{
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
          }]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    methods: {

    }
  }
</script>

<style lang="less" scoped>
</style>

3.6 VUE中环境配置

在根目录中创建文件 vue.config.js 文件

2.添加环境配置

module.exports = {
  //配置项目开发时 是否使用esLint 进行校验. 学习时配置为false 为了高效的学习,开发时配置为true 力求专业
  lintOnSave: false,

  //实现多环境配置
  chainWebpack: config => {

    //定义生产环境的配置
    config.when(process.env.NODE_ENV === 'production', config => {
      config.entry('app').clear().add('./src/main-prod.js')
    })

    //定义开发环境的配置
    config.when(process.env.NODE_ENV === 'development', config => {
      config.entry('app').clear().add('./src/main-dev.js')
    })

  }
}

3.7 VUE项目打包

方式有2种, 方式1: 通过express插件将项目打包
命令: 1. npm init -y

命令2: npm i express -S

命令3: 编辑app.js

const express = require('express')

const app = express()

app.use(express.static('./dist'))
app.listen(8090, () => {
	console.log("服务启动localhost:8090")
})

启动命令:

访问测试:

3.8 VUE项目优化

3.8.1 编辑生产环境配置

module.exports = {
  //配置项目开发时 是否使用esLint 进行校验. 学习时配置为false 为了高效的学习,开发时配置为true 力求专业
  lintOnSave: false,

  //实现多环境配置
  chainWebpack: config => {

    //定义生产环境的配置
    config.when(process.env.NODE_ENV === 'production', config => {
      config.entry('app').clear().add('./src/main-prod.js')

      //通过externals 加载外部CDN资源 被修饰的包不会被添加
      config.set('externals',{
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios:  'axios',
        'vue-quill-editor': 'VueQuillEditor',
         echarts:  'echarts'

      })
    })

    //定义开发环境的配置
    config.when(process.env.NODE_ENV === 'development', config => {
      config.entry('app').clear().add('./src/main-dev.js')
    })

  }
}

3.8.2 引入CDN配置

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
		
		
		<!-- 引入样式表 -->
		<link href="https://cdn.staticfile.org/quill/1.3.6/quill.bubble.min.css" rel="stylesheet">
		<link href="https://cdn.staticfile.org/quill/1.3.6/quill.core.min.css" rel="stylesheet">
		<link href="https://cdn.staticfile.org/quill/1.3.6/quill.snow.min.css" rel="stylesheet">
		<link href="https://cdn.staticfile.org/element-ui/2.15.1/theme-chalk/index.min.css" rel="stylesheet">
		
		
		<!-- 引入其他JS -->
		<script src="https://cdn.staticfile.org/quill/1.3.6/quill.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.6/dist/vue-quill-editor.js"></script>
		<script src="https://cdn.staticfile.org/vue/2.6.9/vue.min.js"></script>
		<script src="https://cdn.staticfile.org/vue-router/3.5.1/vue-router.min.js"></script>
		<script src="https://cdn.staticfile.org/axios/0.21.1/axios.min.js"></script>
		<script src="https://cdn.staticfile.org/echarts/5.1.0/echarts.min.js"></script>
		<script src="https://cdn.staticfile.org/element-ui/2.15.1/index.min.js"></script>
		
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

3.8.3 CDN网址

网址: http://www.staticfile.org/

3.8.4 优化后的结果

3.9 实现路由懒加载

3.9.1 添加插件包

插件名称: babel/plugin-syntax-dynamic-import

3.9.2 添加JS文件

文件名称: @babel/plugin-syntax-dynamic-import

3.9.3 配置路由懒加载

官网地址: https://router.vuejs.org/zh/guide/advanced/lazy-loading.html
语法结构:

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

说明: 根据博客文章安装node.js/ui工具.最终的效果如图即可

这里就正式开始了

按信window+R 打开小窗口后输入：cmd 后就打开小黑窗口

2.2 导入前端项目

2.2.1 前端资源文件

注意事项: 下载的文件一定是一个zip包文件.
路径:

2.2.2 解压文件

将资源文件的zip包解压到第三阶段的课程项目路径下.

window+R

2.2.3 导入项目

# 2.2.4 项目运行

项目最终效果

1. 项目概述

1.1 核心业务

1.用户登录操作
2.后台首页展现/展现左侧菜单列表
3.完成用户模块的CRUD
4.完成商品分类模块的CRUD
5.完成商品模块的CRUD
6.完成商品关联入库、关联删除
7.完成商品图片文件上传
8.实现图片的回显 nginx反向代理
9.完成项目服务器部署准备3台tomcat服务器。实现负载均衡/搭建tomcat集群
10.实现项目Linux 真实环境部署.
阶段目标: 达到初-中级开发工程师的水平. 业务思维!!! 2-3遍

1.2 表设计说明

1.2.1 user表说明

1.2.2 item_cat表

1.2.3 权限表rights

1.2.4 商品表item-itemDesc

item.id = item_desc.id 一一对应.

2. 后端项目搭建

2.1 创建项目

2.1.1 新建项目

2.1.2 选择SpringBoot版本

2.1.3 加载为maven项目(选做)

说明：个别项目创建完成之后,不能被maven识别.所以需要点击如下按钮,进行识别

2.1.4 编辑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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.jt</groupId>
    <artifactId>jt</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>jt</name>
    <description>jt</description>

    <!--只需要复制 除了坐标之外的文件即可-->
    <properties>
        <java.version>1.8</java.version>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <spring-boot.version>2.4.1</spring-boot.version>
    </properties>
    <dependencies>
        <!--springBoot整合mvc-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <!--springBoot整合测试方法-->
        <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 自动的set/get/构造方法插件  -->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>

        <!--mybatis依赖包-->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.2.0</version>
        </dependency>

        <!--jdbc依赖包-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>

    </dependencies>

    <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-dependencies</artifactId>
                <version>${spring-boot.version}</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
        </dependencies>
    </dependencyManagement>

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.8.1</version>
                <configuration>
                    <source>1.8</source>
                    <target>1.8</target>
                    <encoding>UTF-8</encoding>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <version>2.4.1</version>
                <configuration>
                    <mainClass>com.jt.SpringbootDemo1Application</mainClass>
                </configuration>
                <!--排除一些指定的配置-->
                <executions>
                    <execution>
                        <id>repackage</id>
                        <goals>
                            <goal>repackage</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>
</project>

2.1.5 编辑yml文件

#语法: 1.key:(空格)value结构
server:
  port: 8090

#整合数据源
spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://127.0.0.1:3306/jt?serverTimezone=GMT%2B8&useUnicode=true&characterEncoding=utf8&autoReconnect=true&allowMultiQueries=true
    username: root
    password: root

#SpringBoot整合mybatis
mybatis:
  #指定别名包
  type-aliases-package: com.jt.pojo
  #加载指定的xml映射文件
  mapper-locations: classpath:/mybatis/mappers/*.xml
  #开启驼峰映射
  configuration:
    map-underscore-to-camel-case: true

#2.5.6编辑xml映射文件

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.jt.mapper.UserMapper">

    <select id="findAll" resultType="User">
        select * from user
    </select>
</mapper>

复制src文件目录

说明: 将ssm项目中的src导入jt中即可.

2.1.6 修改后端服务器端口号

重要说明: 由于前端将后端服务器端口已经固定,如果实现前后端调用,则后端端口必须为8091.

2.2 后端项目环境测试

2.2.1 项目环境结构

2.2.2 项目测试

完成项目代码测试,按照之前的流程完成入门案例测试

这里我说一下自己出现的错

这个都是null

自己测试数据库存也是连接成功的

最后发现是自己写sql写错了

查表查错了

请看我的错误

改完了后又出现了一个情况

时间为null

哈哈，这又是一个很粗心的错，我写出来，也是时时提醒自己一定要细心，细心很重要

2.3 组件说明

2.3.1 组件结构关系

说明: 每个组件都会包含html/css/js, 这样独立管理, 方便代码的扩展

2.3.2 VUE.js功能模块说明

2.4 首页跳转说明

当用户访问http://localhost:8080/ 时开始访问系统首页
根据路由规则实现跳转, 当用户访问/时, 重定向发起新请求/login

	{path: '/', redirect: '/login'},

3.根据"/login"的请求,跳转到登录组件

	{path: '/login', component: Login},

2.5 关于axios引入说明

1.在核心main.js中引入axios

	/* 导入axios包 */
	import axios from

最低0.47元/天解锁文章

natashaVR

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
京淘项目的jt的完整演练＜二＞

1.京淘项目前端项目搭建1.1 node.js 安装说明: 根据博客文章安装node.js/ui工具.最终的效果如图即可2.2 导入前端项目2.2.1 前端资源文件注意事项: 下载的文件一定是一个zip包文件.路径:2.2.2 解压文件将资源文件的zip包解压到第三阶段的课程项目路径下.2.2.3 导入项目2.2.4 项目运行项目最终效果1. 项目概述1.1 核心业务1.用户登录操作2.后台首页展现/展现左...
复制链接

扫一扫