1. nodejs   53

下载nodejs:  http://nodejs.cn/download/current/

搭建vue环境和开发工程_html

1.1 测试安装结果   53

我放在了E:\java\Node\ziliao

直接双击安装一直下一步即可

可以自己去网上找安装教程

命令行执行 npm -v

搭建vue环境和开发工程_java_02

可以设置淘宝的仓库镜像

先查看现有仓库地址 npm config list

设置淘宝镜像（和maven使用阿里云镜像地址一样的作用）

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

这里也是我之前设置过了

搭建vue环境和开发工程_java_03

1.2 安装webpack   53

负责打包用的

npm i -g webpack webpack-cli

搭建vue环境和开发工程_nodejs_04

1.3  安装vue-cli   53

安装文档地址： https://cli.vuejs.org/zh/guide/installation.html

npm i -g @vue/cli

搭建vue环境和开发工程_java_05

1.4 查看vue-cli   53

命令行 执行 vue -V

搭建vue环境和开发工程_java_06

1.5  vue-cli创建项目

进入你项目的路径

搭建vue环境和开发工程_java_07

进入某一目录，例如licai

创建项目

vue create licai

按下箭头键，选择最后一项，回车

搭建vue环境和开发工程_html_08

新界面选择Router （使用空格键），回车

搭建vue环境和开发工程_nodejs_09

界面选择3.x（使用空格键），回车

搭建vue环境和开发工程_nodejs_10

输入y，回车后再回车

搭建vue环境和开发工程_java_11

界面回车

搭建vue环境和开发工程_nodejs_12

选中回车

搭建vue环境和开发工程_html_13

输入y回车后，在输入myproject 回车

搭建vue环境和开发工程_html_14

开始创建项目，等着完成

成功

搭建vue环境和开发工程_java_15

看看我们的目录

E:\java学习\盈利宝\front\licai

搭建vue环境和开发工程_html_16

进入看看vue版本

搭建vue环境和开发工程_java_17

1.6 在工程中安装vue    54

进入工程目录 cd /work/licai

安装vue最新版本，我们的版本够用不用安装了

npm i --save vue

搭建vue环境和开发工程_nodejs_18

1.7 查看vue版本   54

npm list vue 或者到项目目录 package.json 依赖位置查看版本

查看vue 版本 3.2.20

搭建vue环境和开发工程_java_19

1.8 运行项目

进入到 项目licai目录

执行命令：npm run serve

搭建vue环境和开发工程_java_20

稍等一会

 在浏览器运行程序 http://localhost:8080/

搭建vue环境和开发工程_nodejs_21

至此项目搭建完成

2. 安装前端开发工具  55

前端工具使用自己的熟悉就可以。 常用的WebStorm ; Visual Studio Code(VSCode) ; HBuilder等. 我这里使用的是WebStorm

2.1 安装WebStorm

我放在了E:\java\WebStorm\ziliao

编写文档时WebStorm最新版本是2021.3（其他版本也可以）

WebStorm安装和Idea一样。 下一步，下一步就可以。 

注意一下几个就行了

我安装在E:\java\WebStorm\webstrom

搭建vue环境和开发工程_nodejs_22

搭建vue环境和开发工程_java_23

2.2 使用WebStorm打开项目  55

搭建vue环境和开发工程_java_24

激活

E:\java\WebStorm\激活方法2

直接将压缩包拖进去

搭建vue环境和开发工程_nodejs_25

搭建vue环境和开发工程_java_26

搭建vue环境和开发工程_nodejs_27

配置一下软件

搭建vue环境和开发工程_nodejs_28

搭建vue环境和开发工程_java_29

2.3 项目的目录结构   56

搭建vue环境和开发工程_nodejs_30

3. 开发Vue前端工程

3.1  整理项目文件   56

3.1.1 删除不需要的代码 App.vue

删除后 App.vue

搭建vue环境和开发工程_java_31

<template>
  <nav></nav>
  <router-view/>
</template>

<style>
</style>

3.1.2 views/IndexView.vue   57

views目录下创建IndexView.vue ,作为首页

IndexView.vue 

<template>
  <Header></Header>
  <div>
    <!--banner-->
    <div class="banner-content">
      <div class="swiper-container banner-lb">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <a href="javascript:;" >
              <img src="@/assets/image/banner.jpg" alt="">
            </a>
          </div>
          <div class="swiper-slide">
            <a href="javascript:;" >
              <img src="@/assets/image/banner.jpg" alt="">
            </a>
          </div>
        </div>
      </div>
      <div class="banner-abs">
        <div class="banner-abs-box">
          <div class="banner-abs-title">动力金融网历史年化收益率</div>
          <b>5.61<i>%</i></b>
          <p>平台用户数</p>
          <span>39<i>位</i></span>
          <p class="banner-abs-border">累计成交金额</p>
          <span>5000.0<i>元</i></span>
        </div>
      </div>
    </div>
    <div class="banner-list">
      <ul>
        <li>
          <img src="@/assets/image/banner-tag1.png" alt="">
          <p>
            <b>实力雄厚</b>
            <span>亿级注册资本 ,千万技术投入</span>
          </p>
        </li>
        <li>
          <img src="@/assets/image/banner-tag2.png" alt="">
          <p>
            <b>风控严苛</b>
            <span>30道风控工序，60项信用审核</span>
          </p>
        </li>
        <li>
          <img src="@/assets/image/banner-tag3.png" alt="">
          <p>
            <b>投资省心</b>
            <span>资金安全风控，银行安全托管</span>
          </p>
        </li>
      </ul>
    </div>

    <!--产品-->
    <div class="content">
      <h2 class="public-title"><span>新手宝</span></h2>
      <div class="new-user">
        <div class="new-user-sm">
          <span>1000.0元起投</span>
          <span>投资最高限额10000.0元</span>
          <span>当日即系</span>
        </div>
        <div class="new-user-number">
          <ul>
            <li>
              <p><b>4.9</b>%</p>
              <span>历史年化收益率</span>
            </li>
            <li>
              <p><b>1</b>个月</p>
              <span>投资周期</span>
            </li>
            <li>
              <p><b>250000</b>元</p>
              <span>余利可投资金额</span>
            </li>
          </ul>
          <a href="details.html" target="_blank" class="new-user-btn">立即投资</a>
        </div>
        <span class="new-tag">新用户专享</span>
      </div>

      <h2 class="public-title"><span>优选产品</span> <a href="list.html" target="_blank" class="public-title-more">查看更多产品>></a></h2>
      <ul class="preferred-select clearfix">
        <li>
          <h3 class="preferred-select-title">
            <span>满月宝</span>
            <img src="@/assets/image/1-bg1.jpg" alt="">
          </h3>
          <div class="preferred-select-number">
            <p><b>4.9</b>%</p>
            <span>历史年化收益率</span>
          </div>
          <div class="preferred-select-date">
            <div>
              <span>投资周期</span>
              <p><b>1</b>个月</p>
            </div>
            <div>
              <span>余利可投资金额</span>
              <p><b>250000.0</b>元</p>
            </div>
          </div>
          <p class="preferred-select-txt">
            优选计划项目，投资回报周期1个月，起点低，适合短期资金周转、对流动性要求高的投资人。
          </p>
          <a href="javascript:;" target="_blank" class="preferred-select-btn">立即投资</a>
        </li>
        <li>
          <h3 class="preferred-select-title">
            <span>季度宝</span>
            <img src="@/assets/image/1-bg2.jpg" alt="">
          </h3>
          <div class="preferred-select-number">
            <p><b>6.2</b>%</p>
            <span>历史年化收益率</span>
          </div>
          <div class="preferred-select-date">
            <div>
              <span>投资周期</span>
              <p><b>1</b>个月</p>
            </div>
            <div>
              <span>余利可投资金额</span>
              <p class="preferred-select-date-no"><b>0.0</b>元</p>
            </div>
          </div>
          <p class="preferred-select-txt">
            优选计划项目，投资回报周期1个月，起点低，适合短期资金周转、对流动性要求高的投资人。
          </p>
          <a href="javascript:;" target="_blank" class="preferred-select-btn">立即投资</a>
        </li>
        <li>
          <h3 class="preferred-select-title">
            <span>双季宝</span>
            <img src="@/assets/image/1-bg3.jpg" alt="">
          </h3>
          <div class="preferred-select-number">
            <p><b>7.1</b>%</p>
            <span>历史年化收益率</span>
          </div>
          <div class="preferred-select-date">
            <div>
              <span>投资周期</span>
              <p><b>1</b>个月</p>
            </div>
            <div>
              <span>余利可投资金额</span>
              <p><b>250000.0</b>元</p>
            </div>
          </div>
          <p class="preferred-select-txt">
            优选计划项目，投资回报周期1个月，起点低，适合短期资金周转、对流动性要求高的投资人。
          </p>
          <a href="javascript:;" target="_blank" class="preferred-select-btn">立即投资</a>
        </li>
      </ul>

      <h2 class="public-title"><span>散标产品</span> <a href="list.html" target="_blank" class="public-title-more">查看更多产品>></a></h2>
      <ul class="preferred-select clearfix">
        <li>
          <h3 class="preferred-select-title1">个人信用消费借款
            <span>散标</span>
          </h3>
          <div class="preferred-select-number">
            <p><b>4.9</b>%</p>
            <span>历史年化收益率</span>
          </div>
          <div class="preferred-select-date">
            <div>
              <span>投资周期</span>
              <p><b>1</b>个月</p>
            </div>
            <div>
              <span>余利可投资金额</span>
              <p><b>250000.0</b>元</p>
            </div>
          </div>
          <p class="preferred-select-txt">
            优选计划项目，投资回报周期1个月，起点低，适合短期资金周转、对流动性要求高的投资人。
          </p>
          <a href="javascript:;" target="_blank" class="preferred-select-btn">立即投资</a>
        </li>
        <li>
          <h3 class="preferred-select-title1">个人信用消费借款
            <span>散标</span>
          </h3>
          <div class="preferred-select-number">
            <p><b>6.2</b>%</p>
            <span>历史年化收益率</span>
          </div>
          <div class="preferred-select-date">
            <div>
              <span>投资周期</span>
              <p><b>1</b>个月</p>
            </div>
            <div>
              <span>余利可投资金额</span>
              <p class="preferred-select-date-no"><b>0.0</b>元</p>
            </div>
          </div>
          <p class="preferred-select-txt">
            优选计划项目，投资回报周期1个月，起点低，适合短期资金周转、对流动性要求高的投资人。
          </p>
          <a href="javascript:;" target="_blank" class="preferred-select-btn">立即投资</a>
        </li>
        <li>
          <h3 class="preferred-select-title1">个人信用消费借款
            <span>散标</span>
          </h3>
          <div class="preferred-select-number">
            <p><b>7.1</b>%</p>
            <span>历史年化收益率</span>
          </div>
          <div class="preferred-select-date">
            <div>
              <span>投资周期</span>
              <p><b>1</b>个月</p>
            </div>
            <div>
              <span>余利可投资金额</span>
              <p><b>250000.0</b>元</p>
            </div>
          </div>
          <p class="preferred-select-txt">
            优选计划项目，投资回报周期1个月，起点低，适合短期资金周转、对流动性要求高的投资人。
          </p>
          <a href="javascript:;" target="_blank" class="preferred-select-btn">立即投资</a>
        </li>
      </ul>

    </div>

    <!--说明-->
    <div class="information-box">
      <ul>
        <li>
          <img src="@/assets/image/2-icon1.png" alt="">
          <p>优质借款</p>
          <span>严苛风控，多重审核</span>

        </li>
        <li>
          <img src="@/assets/image/2-icon2.png" alt="">
          <p>次日计息</p>
          <span>闪电成交，谁比我快</span>
        </li>
        <li>
          <img src="@/assets/image/2-icon3.png" alt="">
          <p>全年无休</p>
          <span>百万用户，一路同行</span>
        </li>
        <li>
          <img src="@/assets/image/2-icon4.png" alt="">
          <p>知心托付</p>
          <span>百万用户，一路同行</span>
        </li>
        <li>
          <img src="@/assets/image/2-icon5.png" alt="">
          <p>技术保障</p>
          <span>千万投入，专注研发</span>
        </li>
      </ul>
    </div>


    <Footer></Footer>
  </div>
</template>

<script>
import Header from "@/components/common/Header";
import Footer from "@/components/common/Footer";
export default {
  name: "IndexView",
  components:{
    // eslint-disable-next-line vue/no-unused-components
    Header,
    // eslint-disable-next-line vue/no-unused-components
    Footer
  }
}
</script>

<style scoped>

</style>

搭建vue环境和开发工程_html_32

3.1.3 修改首页路由    56

router/index.js 把原来Home的配置修改

再index.js中修改首页面配置

搭建vue环境和开发工程_java_33

测试一下

浏览器输入http://localhost:8080/

搭建vue环境和开发工程_java_34

3.2  盈利宝加入静态资源   56

E:\java学习\盈利宝\资料\资料\01-盈利宝-页面原型\盈利宝pc\public

搭建vue环境和开发工程_nodejs_35

不需要js目录 拷贝到 asserts 目录

将我们项目的页面资源添加进来

搭建vue环境和开发工程_nodejs_36

搭建vue环境和开发工程_nodejs_37

3.3 创建公共资源   57

Header.vue

<template>
  <!--头部-->
  <div class="public-head">
    <div class="public-head-nav">
      <div class="public-head-left">
        <h1 class="public-head-logo"><a href="javascript:;">
          <img src="@/assets/image/logo.png" alt="">
        </a></h1>
        <ul class="public-head-list">
          <li><a href="index.html" target="_blank">主页</a></li>
          <li class="public-head-hover">
            <a href="javascript:void(0);">我要投资</a>
            <!--二级导航-->
            <div class="two-title">
              <a href="javascript:;">优选类产品</a>
              <a href="javascript:;">散标类产品</a>
            </div>
          </li>
          <li><a href="user_center.html" target="_blank">借款人信息</a></li>
          <li><a href="javascript:;" target="_blank">信息披露</a></li>
          <li><a href="javascript:;" target="_blank">安全计划</a></li>
        </ul>
      </div>
      <div class="public-head-right">
        <a href="login.html" target="_blank">登录</a>
        <a href="register.html" target="_blank">注册</a>
      </div>
    </div>
  </div>
  <!--end-->
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Header"
}
</script>

<style scoped>

</style>

Footer.vue

<template>
  <!--公共底部-->
  <div class="public-bottom">
    <div>
      <p>自己练习</p>
      <p>进击的菜鸟子<a href="javascript:;">Visit the HomePage</a></p>
    </div>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Footer"
}
</script>

<style scoped>

</style>

3.5 main.js   56

搭建vue环境和开发工程_html_38

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import '@/assets/css/details.css'
import '@/assets/css/font-awesome.min.css'
import '@/assets/css/index.css'
import '@/assets/css/list.css'
import '@/assets/css/login.css'
import '@/assets/css/public-head.css'
import '@/assets/css/reset.css'
import '@/assets/css/swiper.css'
import '@/assets/css/user_center.css'
import '@/assets/css/user_pay.css'
createApp(App).use(router).mount('#app')

4. 配置axios    58

启动后端

4.1 安装axios , 项目根目录下执行：  npm i axios --save   58

搭建vue环境和开发工程_nodejs_39

IndexView.vue

搭建vue环境和开发工程_java_40

mounted() {  //页面加载到浏览器，执行mounted
    //向服务器发起请求，获取数据，更新页面
    axios.get('http://localhost:8000/api/v1/plat/info').then(resp=>{
      console.log("从服务器获取首页平台基本信息："+resp);
      if( resp ){
        this.platInfo = resp.data.data;
      }
    })
  }

运行刷新

失败，跨域问题

搭建vue环境和开发工程_java_41

解决跨域

操作micr-web模块

搭建vue环境和开发工程_nodejs_42

重新启动前后端

搭建vue环境和开发工程_nodejs_43

接收服务器传来的数据  59

IndexView.vue

data(){
    return {
      platInfo:{historyAvgRate:0.00,sumBidMoney:0.00,registerUsers:0}
    }
  },

搭建vue环境和开发工程_java_44

搭建vue环境和开发工程_nodejs_45

5. JSON序列化   60

因为我们传给前端的json数据有的回事null，所以这个序列化给空值赋值为" "

搭建vue环境和开发工程_java_46

操作micr-web

json序列化空值为 “ ”

package com.bjpowernode.front.setttings;

import com.fasterxml.jackson.core.JsonGenerator;
import com.fasterxml.jackson.databind.JsonSerializer;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.databind.SerializerProvider;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

import java.io.IOException;

//json序列化   60
@Configuration
public class JacksonConfiguration {
    /**
     * @return 序列化null为“ ”
     */
    @Bean
    public ObjectMapper objectMapper() {
        ObjectMapper objectMapper = new ObjectMapper();
        //设置null序列化时为 ”“
        objectMapper.getSerializerProvider().setNullValueSerializer(new JsonSerializer<Object>() {
            @Override
            public void serialize(Object o, JsonGenerator jsonGenerator, SerializerProvider serializerProvider) throws IOException {
                jsonGenerator.writeString("");
            }
        });

        return objectMapper;
    }

}

运行程序

搭建vue环境和开发工程_java_47