前端开发

前端工具&概念

前端三大框架:

vue-cli: Vue.js command line interface

ESLint: 识别ECMAScript 并且按照规则给出报告的代码检测工具,模块化,静态代码检查(The standard of scripting languages like JavaScript is ECMAScript)

WebPack: 前端的模块化和打包工具,把需要的资源打成一个bundle.js

新建工程

参考教程: https://blog.codecentric.de/en/2018/04/spring-boot-vuejs/

首先保证你已经安装了node 如果是使用brew可以just do brew install node

# sudo npm install --global vue-cli #安装的是2.9.x版本
npm install -g @vue/cli #安装3.0版本,建议,否则后面无法安装Element插件

vue init webpack vue-frontend
# 会问你一系列配置问题,回答如下
? Project name vue-frontend
? Project description a vue frontend that works with spring-boot backend
? Author OliveDS <dengs415@163.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner karma
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recom
mended) npm

安装完成后会提醒你使用

cd vue-frontend
npm run dev

指令编译和运行VUE app,打开`http://localhost:8081/皆可查看你的网页应用

control+C退出

完整的可用指令为

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test

使用 frontend-maven-plugin

<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>
    <!-- 公司或者组织的唯一标志，并且配置时生成的路径也是由此生成， 如com.companyname.project-group，maven会将该项目打成的jar包放本地路径：/com/companyname/project-group -->
    <groupId>dsjk-group5.movie-recommand</groupId>
 
    <!-- 项目的唯一ID，一个groupId下面可能多个项目，就是靠artifactId来区分的 -->
    <artifactId>vue-frontend</artifactId>
 
    <!-- 版本号 -->
    <version>1.0</version>
    <build>
        <plugins>
            <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
                <version>1.7.6</version>
                <executions>
                    <!-- Install our node and npm version to run npm/node scripts-->
                    <execution>
                        <id>install node and npm</id>
                        <goals>
                            <goal>install-node-and-npm</goal>
                        </goals>
                        <configuration>
                            <nodeVersion>v9.11.1</nodeVersion>
                        </configuration>
                    </execution>
                    <!-- Install all project dependencies -->
                    <execution>
                        <id>npm install</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <!-- optional: default phase is "generate-resources" -->
                        <phase>generate-resources</phase>
                        <!-- Optional configuration which provides for running any npm command -->
                        <configuration>
                            <arguments>install</arguments>
                        </configuration>
                    </execution>
                    <!-- Build and minify static files -->
                    <execution>
                        <id>npm run build</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <configuration>
                            <arguments>run build</arguments>
            </configuration>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>
</project>

整个project的groupID和artifactID需要自己命名

frontend-maven-plugin`的版本可以从下面网站找到最新的

https://mvnrepository.com/artifact/com.github.eirslett/frontend-maven-plugin

Vue 调用 RESTful API

可以使用axios工具

npm audit fix npm install axios --save
# 我安装后提醒缺少ajv,需要手动安装
npm install ajv
# 安装后提醒需要修复npm vulnerabilities
npm audit fix

调用方法:

Calling a REST service with Axios is simple. Go into the script area of your component (e.g. in the Service.vue) and add:

`import axios from 'axios'   data () {   return {     response: [],     errors: []   } },   callRestService () {   axios.get(`/api/hello`)     .then(response => {       // JSON responses are automatically parsed.       this.response = response.data     })     .catch(e => {       this.errors.push(e)     }) } }`

Now inside the template area of your Vue.js component you can request a service call with the callRestService() method – and access the response data accordingly:

`<button class=”Search__button” @click="callRestService()">CALL Spring Boot REST backend service</button>   <h3>{{ response }}</h3>`

还有一个问题: if we start the webpack-dev-server via npm run dev, it will serve our web application on http://localhost:**8080**. But our Spring Boot REST backend runs on http://localhost:**8088**! As a core concept of web application security, the same-origin policy (SOP) will then prevent our Vue.js frontend from accessing its Spring Boot backend – resulting in SOP errors.

使用 element-starter-master

安装 webpack

npm install webpack
npm install webpack-dev-server -g
#不行

代码结构

webpack.base.conf.js中的entry规定了整个工程的入口js为main.js

main.js中规定了需要在页面中调用的VUE组件App,对应到同级目录下的App.vue

webpack在编译时将.vue文件中的html，js，css都抽出来合成新的单独的文件。

使用 Element-UI

在project目录下执行

vue add element
? How do you want to import Element? Fully import
? Do you wish to overwrite Element's SCSS variables? No
? Choose the locale you want to load zh-CN

这行指令会让你选择上面3个?,在工程的src下添加plugin->element.js加入对element的引用

修改代码

In Vue you must have only one root element in your templates.

如果.vue文件的template下需要有多个元素,则用一个大的\

包起来

使用axios实现POST GET

登录/注册等操作需要前端将信息POST/GET给后端,需要使用axios工具

参考: https://zhuanlan.zhihu.com/p/52059361

npm i axios # 安装