搞副业|全网最快前端-阿里云开发者社区

搞副业|全网最快前端

2023-08-08 86

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 搞副业|全网最快前端

本文讲解SpringBoot和Vue项目搭建的最小化原型，非常方便后续同类知识点的学习，同时也是非常棒的脚手架，可快速搭建各种实验的基础框架，本文实践于2022年7月10号，练习前建议仔细核对相关软件版本，避免引起不必要的麻烦。

在前后端项目分离之前，java工程师一般身兼两职，又做前端也做后端。项目规模大的团队可能有美工或js工程师分担一部分工作。部署也往往都堆砌在一起，互联网电商行业好一些，为响应百万级以上请求，一般会将静态文件单独部署到apache、nginx等http应用中并逐步引入cdn服务。

现今前端项目如雨后春笋般涌现，各项技术日新月异，作为后端工程师不可避免的也需要多少学习一下前端知识，简单地说方便项目联调联试，未来成为一个优秀全栈工程师或架构师也是非常有必要的。

因篇幅所限，SpringBoot项目搭建请参考我们提供的另一份文档。

一、Vue开发环境搭建

当前国内网络环境能找到的Vue文档大多基于2.0版本，语法与当前3.0差异极大，因此本文提供手把手的教程，从头学习。

开发环境准备工作：

实验测试时间于2022年7月10日
开发机采用 Win10 64位操作系统
开发IDE采用Visual Studio Code 1.69.0
运维Shell采用Windows Terminal 1.13，你也可以用OS自带的cmd
Node.js采用官方LTS最新版v16.16，并设置了阿里云镜像加速
vue采用3.0版本

Tip: 以上工具文档均可在网上轻松搜索得到，但大多陈旧、版本不一，建议参考本文实现方式

安装调试：

# Node.js的安装不难，主要是版本的选择要小心谨慎，尽量选择官方最新的LTS版本，避免麻烦，必要时回退一个版本
一路next即可安装好node.js
# 设置淘宝镜像源加速
npm --registry=https://registry.npm.taobao.org install
# 安装vue和cli
npm install vue
npm install -g @vue/cli
# 启动UI界面程序进行项目搭建，相比命令行很少出错！
vue ui

二、Vue项目搭建

vue项目的使用其实就引入vue.js即可，为方便协同开发、各种插件测试，建议采用node平台并以项目的形式进行创建，易于后续的开发和维护。

当前环境版本：

G:\桌面\vue-study\nodetest2>node -v
v16.16.0
G:\桌面\vue-study\nodetest2>npm -v
8.11.0
G:\桌面\vue-study\nodetest2>vue -V
@vue/cli 5.0.8

项目搭建：采用web ui的形式，简单、舒心，我们需要把全部精力投入到关键业务开发，而不是无关的事情上！

插件安装：项目创建后，我们需要安装常用的三个插件，采用ui界面操作是非常简单的

vuex，大型项目中管理数据状态的一种机制，将Vue中所有的状态（数据）抽离出来进行统一管理
vue-router，vue的路由机制，避免一堆的a标签，也是vue响应这么迅速的关键！
axios，用于与后端通讯，类似以前Ajax组件

项目代码一览：

App.vue 项目入口文件，源于自动生成，需增加一个book入口方便测试和查看。
router/index.js 路由文件，设置我们项目的展示层内容
views/bookView.vue 项目主要展示文件，也是日常反复编译调试的地方

1/3、App.vue 项目自动生成，增加router-link关于book的入口

<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>|
    <router-link to="/book">Book</router-link>
  </nav>
  <router-view/>
</template>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
nav {
  padding: 30px;
}
nav a {
  font-weight: bold;
  color: #2c3e50;
}
nav a.router-link-exact-active {
  color: #42b983;
}
</style>

2/3、router/index.js 项目自动生成，增加book的路由匹配规则

import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },    
  {
    /* 匹配请求 */
    path: '/book',
    name: 'book',
    component: () => import(/* webpackChunkName: "book" */ '../views/BookView.vue')
  }
]
const router = createRouter({
  history: createWebHashHistory(),
  routes
})
export default router

3/3、views/bookView.vue

<template>
<div>
    <table border="1px">
        <tr>
            <td>编号</td>
            <td>图书名称</td>
            <td>作者</td>
            <td>出版社</td>
            <td>页数</td>
            <td>价格</td>
    </tr>
        <!-- 循环展示数据 -->
        <tr v-for="elem in books">
            <td>{{ elem.id }}</td>
            <td>{{ elem.bookName }}</td>
            <td>{{ elem.author }}</td>
            <td>{{ elem.publish }}</td>
            <td>{{ elem.pages }}</td>
            <td>{{ elem.price }}</td>
    </tr>
    </table>
    {{ msg }}
    </div>
</template>
<script>
    export default {
        name: "Book",
        data() {
            /* 数据造假 */
            return {
                msg: 'Hello Vue',
                books: [
                    {
                        id: 1,
                        bookName: '平凡的世界',
                        author: '张三',
                        publish:'开心出版社',
                        pages:'100',
                        price:'100.01'
                    },
                    {
                        id: 2,
                        bookName: '月亮与六便士',
                        author: '李四',
                        publish:'快乐出版社',
                        pages:'90',
                        price:'99.01'
                    }
                ]
            }
        },
        /* created()是初始化方法，用于向后端请求数据 */
        created() {
            const _this = this
            const axios = require('axios');
            axios.get("http://localhost:8080/list")
                .then(function (resp) {
                _this.books = resp.data;
                });
            axios.get("http://localhost:8082/test")
                .then(function (resp) {
                _this.msg = resp.data;
                })
        }
    }
</script>
<style scoped>
</style>