文章回顾了Springboot如何使用maven搭建框架，强调了约定大于配置的原则，减少了繁琐的配置工作。在Vue方面，讨论了模板根节点只能有一个元素的问题及其解决方案，以及Vue3.0中解决no-unused-vars警告的方法。此外，介绍了使用vue-cli创建项目，查询图书并展示的步骤，包括项目结构、路由设置和axios的使用。
上周回顾
Springboot
使用maven手动搭建框架
约定大于配置
约定大于配置是一种开发原则，就是减少人为的配置，直接用默认的配置就能获得我们想要的结果。
SpringBoot的约定大于配置，按我的理解是：对比SpringMVC，需要在web.xml里面配置前端控制器，还需要在核心配置文件（*-servlet.xml）中配置视图解析器啥的，更要配置第三方的Tomcat服务器。而SpringBoot就不需要我们配置这些，他内嵌了Tomcat服务器，我们只需要在Maven配置文件（Pom.xml）里面导入SpringMVC所需要的依赖就可以了。
这就是SpringBoot的优势，在传统所需要配置的地方，SpringBoot都进行了约定（配置好了），开发人员能配置得更少，更直接地开发项目，写业务逻辑代码。
spring boot和maven的约定大于配置体现点：
-
maven的目录文件结构
1）默认有resources文件夹,存放资源配置文件。src-main-resources,src-main-java
默认的编译生成的类都在target文件夹。
2）默认有target文件夹，将生成class文件盒编程生成的jar存放在target文件夹下 -
spring boot默认的配置文件必须是，也只能是application.命名的yml文件或者properties文件，且唯一
1）spring boot默认只会去src-main-resources文件夹下去找application配置文件
©️https://blog.csdn.net/lxh650/article/details/98116260
debug
1️⃣
-
<h1>hello vue!</h1> <h1>{{msg}}</h1> -
报错信息:Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.
-
解决方案:只能有一个直系子元素
-
用一个div包围
-
<div> <h1>hello vue!</h1> <h1>{{ msg }}</h1> </div>
-
根结点tmplate中只能有一个元素
当多个template出现时,保证tmplate里面只有一个元素,可以使用div包围
vue3.0出现“***“is defined but never used no-unused-vars的解决办法
- 在package.json文件内加入如下代码：然后保存重启项目。
"rules": {
"generator-star-spacing": "off",
"no-tabs":"off",
"no-unused-vars":"off",
"no-console":"off",
"no-irregular-whitespace":"off",
"no-debugger": "off"
},
作业
- 使用vue-cli+ 后台完成查询图书并展示的工作。
- 博客梳理： 前端工程化的开发过程。
使用vue-cli+后台完成查询图书并展示的工作
项目结构
Book.vue
<template>
<div>
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="book.title" label="书名">
</el-table-column>
<el-table-column prop="book.author" label="作者">
</el-table-column>
<el-table-column prop="bookPublisher.name" label="出版社">
</el-table-column>
<el-table-column prop="bookType.name" label="类型">
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
size="mini"
@click="viewIntroduction(scope.row)">产看介绍</el-button>
</template>
</el-table-column>
</el-table>
</template>
<div class="block">
<span class="demonstration">图书分页</span>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[100, 200, 300, 400]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
<el-dialog title="图书介绍" :visible.sync="dialogVisible">
{{introduction}}
</el-dialog>
</div>
</template>
<script>
import $requet from '../utils/request'
export default {
data() {
return {
tableData: [],
form: {
title: '',
author: '',
publisher: '',
price_min: '',
price_max: '',
},
currentPage : 1,
pageSize : 100,
total : 0,
introduction : '',
dialogVisible : false
}
},
methods : {
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.pageSize = val;
this.currentPage = 1;
// this.getAll(this.currentPage,this.pageSize)
this.getAll();
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.currentPage = val;
// this.getAll(this.currentPage,this.pageSize);
this.getAll();
},
//不带条件查询
getAll() {
let _this = this;
// const axios = require('axios');
// 向给定ID的用户发起请求
$requet.get('http://localhost:11111/api/book/getAllBooks', {
params: {
currentPage: this.currentPage,
pageSize: this.pageSize,
}
})
.then(function (response) {
// 处理成功情况
console.log(response);
_this.tableData = response.data.records;
_this.total = response.data.total;
})
.catch(function (error) {
// 处理错误情况
console.log(error);
})
.then(function () {
// 总是会执行
});
},
viewIntroduction(data) {
console.log(data);
this.introduction = data.book.introduction;
this.dialogVisible = true;
},
},
mounted(){
this.getAll();
}
}
</script>
路由设置
request.js引入axios
import axios from 'axios'
const $request = axios.create({
timeout: 5000
});
$request.interceptors.request.use(
config=>{
config.headers['Content-Type']='application/json;charset=utf-8';
return config;
},error=>{
return Promise.reject(error);
}
);
export default $request;
前端工程化的开发过程
安装Node.js
Node.js发布于2009年5月，是一个基于Chrome V8引擎的JavaScript运行环境，使用了一个事件驱动、非阻塞式I/O模型，让JavaScript 运行在服务端的开发平台，它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。
Node.js对一些特殊用例进行优化，提供替代的API，使得V8在非浏览器环境下运行得更好，V8引擎执行Javascript的速度非常快，性能非常好，基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。
-
安装
node-v18.16.0-64.msi版本 -
测试安装成功
命令行输入:
node -v v18.16.0
Vue CLI
Vue CLI的定义
CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架. Vue CLI是一个官方发布 vue.js 项目脚手架 使用 vue-cli可以快速搭建Vue开发环境以及对应的webpack配置.
Vue CLI使用前提 - Node
-
安装NodeJS 可以直接在官方网站中下载安装. 网址: http://nodejs.cn/download/
-
检测安装的版本 默认情况下自动安装Node和NPM Node环境要求8.9以上或者更高版本
-
什么是NPM呢? NPM的全称是Node Package Manager,是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准。
-
cnpm安装 由于国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。 你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的
npm: npm install -g cnpm --registry=https://registry.npm.taobao.org这样就可以使用 cnpm 命令来安装模块了：cnpm install [name] -
这里我使用的是
npm install -g@vue/cli@4.5.15 -
检验安装是否成功
> vue --version @vue/cli 4.5.15
在脚手架搭建后,新建vue项目
使用命令vue create 项目名称
使用默认Vue2进行创建
因为版本兼容问题,在package.json中修改配置
"serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
"build": "SET NODE_OPTIONS=--openssl-legacy-provider &&vue-cli-service build",
观察vue项目的基本构成
-
node_modules: 类似于maven库,需要的模块都会存储在这个"仓库"
-
public: 放置图片包或者某些静态文件
-
src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
1）assets：资源目录，放置一些图片或者公共js、公共css。但是因为它们属于代码目录下，所以可以用 webpack 来操作和处理。意思就是你可以使用一些预处理比如 Sass/SCSS 或者 Stylus。
2）components：用来存放自定义组件的目录，目前里面会有一个示例组件。
3）router：前端路由目录，我们需要配置的路由路径写在index.js里面；
4）App.vue：根组件；这是 Vue 应用的根节点组件，往下看可以了解更多关注 Vue 组件的信息。
5）main.js：应用的入口文件。主要是引入vue框架，根组件及路由设置，并且定义vue实例，即初始化 Vue 应用并且制定将应用挂载到index.html 文件中的哪个 HTML 元素上。通常还会做一些注册全局组件或者添额外的 Vue 库的操作。
引入element-ui
-
npm命令:
npm i element-ui -S
-
import方式
-
在main.js中加入
import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; -
再加入
Vue.use(ElementUI)
-
-
如图
路由(Router)
安装router
npm i vue-router@3.5.3
配置router
- 在src/router下新建index.js文件
- main.js中的变动
- 在App.vue中的变动
]
安装router
npm i vue-router@3.5.3
配置router
- 在src/router下新建index.js文件
[外链图片转存中…(img-kXvFpKsx-1688990296773)]
- main.js中的变动
[外链图片转存中…(img-Ubg5rRYz-1688990296774)]
- 在App.vue中的变动
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
