上周回顾
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+后台完成查询图书并展示的工作
项目结构
![image-20230710191314819](https://i-blog.csdnimg.cn/blog_migrate/4d359094196da4ecc26d5c8422d9701f.png)
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中的变动
![image-20230710195724356](https://i-blog.csdnimg.cn/blog_migrate/d4aad8ed450d5f8eb872486656424705.png)
安装router
npm i vue-router@3.5.3
配置router
- 在src/router下新建index.js文件
[外链图片转存中…(img-kXvFpKsx-1688990296773)]
- main.js中的变动
[外链图片转存中…(img-Ubg5rRYz-1688990296774)]
- 在App.vue中的变动
![image-20230710195724356](https://i-blog.csdnimg.cn/blog_migrate/d4aad8ed450d5f8eb872486656424705.png)