1. 整体框架
2. 前端页面布局
使用 bootstrap 的 grids system
进行布局。页面规划如下:
在 bootstrap
的网址搜索 grids system
。
一行分为12份,左边3份,为头像;右边9份,白色区域 cards
,加上按钮创建 bot
,获取 Bot
列表
在 views.user.bot.UserBotIndexView.vue
下修改,实现基本的个人 bot
信息展示。
实现 refresh_bot,获取上节课的 API: /user/bot/getlist/
查询 bot 列表,通过获取后端信息把数据展示在前端上。
import { ref, reactive } from 'vue'
import $ from 'jquery'
import { useStore } from 'vuex'
export default {
const store = useStore();
const refresh_bots = () => {
$.ajax({
url: "http://127.0.0.1:8080/user/bot/getlist/",
type: "get",
headers: {
Authorization: "Bearer " + store.state.user.token,
},
success(resp) {
bots.value = resp;
}
})
}
refresh_bots();
}
}
获取用户信息成功:
3. 前端页面创建、修改、删除 Bot
3.1 创建一个 Bot
在点击 创建Bot
按钮的时候需要一个弹窗。在 bootstrap
中寻找一个 modals
:
在 views.user.bot.UserBotIndexView.vue
下修改,增加一个模态框,然后丰富模态框的内容。
增加一个 add_bot
函数:
import { ref, reactive } from 'vue'
import $ from 'jquery'
import { useStore } from 'vuex'
export default {
const store = useStore();
const botadd = reactive({
title: "",
description: "",
content: "",
error_message: "",
});
const refresh_bots = () => {
$.ajax({
url: "http://127.0.0.1:8080/user/bot/getlist/",
type: "get",
headers: {
Authorization: "Bearer " + store.state.user.token,
},
success(resp) {
bots.value = resp;
}
})
}
refresh_bots();
//创建一个 bot
const add_bot = () => {
botadd.error_message = "";
$.ajax({
url: "http://127.0.0.1:8080/user/bot/add/",
type: "post",
data: {
title: botadd.title,
description: botadd.description,
content: botadd.content,
},
headers: {
Authorization: "Bearer " + store.state.user.token,
},
success(resp) {
if (resp.error_message === "success") {
botadd.title = "";
botadd.description = "";
botadd.content = "";
Modal.getInstance("#add-bot-btn").hide();
refresh_bots();
} else {
botadd.error_message = resp.error_message;
}
}
})
}
return {
bots,
botadd,
add_bot,
}
}
}
创建完成后需要绑定前端的信息。在前面的地方加上 v-model
,同时增加一个 触发事件。
名称
简介
代码
////
//增加报错信息
{{ botadd.error_message }}
创建
取消
如果创建 Bot
的时候时间出现问题:在后端的 pojo
里修改,加上时区:
package com.kob.backend.pojo;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.fasterxml.jackson.annotation.JsonFormat;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import java.util.Date;
@Data
@NoArgsConstructor
@AllArgsConstructor
public class Bot {
@TableId(type = IdType.AUTO)
private Integer id; //在pojo里最好用Integer,否则会报警告
private Integer userId; //pojo里要用驼峰命名法和数据库的下划线对应
private String title;
private String description;
private String Content;
private Integer rating;
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "Asia/Shanghai")
private Date createtime;
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "Asia/Shanghai")
private Date modifytime;
}
成功效果如下:
3.2 删除一个 Bot
增加一个 删除 bot
的函数:
import { ref, reactive } from 'vue'
import $ from 'jquery'
import { useStore } from 'vuex'
export default {
const store = useStore();
const botadd = reactive({
title: "",
description: "",
content: "",
error_message: "",
});
const refresh_bots = () => {
$.ajax({
url: "http://127.0.0.1:8080/user/bot/getlist/",
type: "get",
headers: {
Authorization: "Bearer " + store.state.user.token,
},
success(resp) {
bots.value = resp;
}
})
}
refresh_bots();
//创建一个 bot
const add_bot = () => {
botadd.error_message = "";
$.ajax({
url: "http://127.0.0.1:8080/user/bot/add/",
type: "post",
data: {
title: botadd.title,
description: botadd.description,
content: botadd.content,
},
headers: {
Authorization: "Bearer " + store.state.user.token,
},
success(resp) {
if (resp.error_message === "success") {
botadd.title = "";
botadd.description = "";
botadd.content = "";
Modal.getInstance("#add-bot-btn").hide();
refresh_bots();
} else {
botadd.error_message = resp.error_message;
}
}
})
}
//删除一个 bot
const remove_bot = (bot) => {
$.ajax({
url: "http://127.0.0.1:8080/user/bot/remove/",
type: "post",
data: {
bot_id: bot.id,
},
headers: {
Authorization: "Bearer " + store.state.user.token,
},
success(resp) {
console.log(resp);
if (resp.error_message === "success") {
refresh_bots();
}
}
})
}
return {
bots,
botadd,
add_bot,
remove_bot,
}
}
}
同时需要在上文绑定 删除
按钮。
名称
创建时间
操作
{{ bot.title }}
{{ bot.createtime }}
修改
删除
如果删除的时候提示没有权限,可能是因为后端的 RemoveServiceImpl.java
文件出错,在里面修改即可。
成功效果:
3.3 修改一个 Bot
在 views.user.bot.UserBotIndexView.vue
下修改。
import { ref, reactive } from 'vue'
import $ from 'jquery'
import { useStore } from 'vuex'
export default {
const store = useStore();
const botadd = reactive({
title: "",
description: "",
content: "",
error_message: "",
});
const refresh_bots = () => {
$.ajax({
url: "http://127.0.0.1:8080/user/bot/getlist/",
type: "get",
headers: {
Authorization: "Bearer " + store.state.user.token,
},
success(resp) {
bots.value = resp;
}
})
}
refresh_bots();
//创建一个 bot
const add_bot = () => {
botadd.error_message = "";
$.ajax({
url: "http://127.0.0.1:8080/user/bot/add/",
type: "post",
data: {
title: botadd.title,
description: botadd.description,
content: botadd.content,
},
headers: {
Authorization: "Bearer " + store.state.user.token,
},
success(resp) {
if (resp.error_message === "success") {
botadd.title = "";
botadd.description = "";
botadd.content = "";
Modal.getInstance("#add-bot-btn").hide();
refresh_bots();
} else {
botadd.error_message = resp.error_message;
}
}
})
}
//删除一个 bot
const remove_bot = (bot) => {
$.ajax({
url: "http://127.0.0.1:8080/user/bot/remove/",
type: "post",
data: {
bot_id: bot.id,
},
headers: {
Authorization: "Bearer " + store.state.user.token,
},
success(resp) {
console.log(resp);
if (resp.error_message === "success") {
refresh_bots();
}
}
})
}
const update_bot = (bot) => {
botadd.error_message = "";
$.ajax({
url: "http://127.0.0.1:8080/user/bot/update/",
type: "post",
data: {
bot_id: bot.id,
title: bot.title,
description: bot.description,
content: bot.content,
},
headers: {
Authorization: "Bearer " + store.state.user.token,
},
success(resp) {
if (resp.error_message === "success") {
Modal.getInstance('#update-bot-modal-' + bot.id).hide();
refresh_bots();
} else {
botadd.error_message = resp.error_message;
}
}
})
}
return {
bots,
botadd,
add_bot,
remove_bot,
update_bot,
}
}
}
修改每一个 bot 的时候需要有对应单独的一个模态框。
成功效果如下:
3.4 实现代码框
- 在 vue 界面添加依赖
vue3-ace-editor
- 添加组件
import { VAceEditor } from 'vue3-ace-editor';
import ace from 'ace-builds';
ace.config.set(
"basePath",
"https://cdn.jsdelivr.net/npm/ace-builds@" + require('ace-builds').version + "/src-noconflict/")
后端:
目的是实现一个函数,一个函数对应一个链接,给用户返回一个界面,函数下载任意一个地方,一般开一个新的包(目录)controller存放所有后端函数,一个包下分多个模块(也是包),模块类是函数,代表该功能主页面,把它变成链接对应的函数只需要加上注解Controller,再加一个@RequestMapping(“/pk/”)副路径
想返回一个页面,(创建再Resources里的templates里
添加一张图片,路径从static(static有image、css、js)后面写
前后端不分离,向后端发送一个链接,后端去解析链接,通过controller注解找到函数,返回html页面
前后端如果分离,后端不再返回html,而是返回数据
怎么返回呢?创建一个新的类
注解用RestController
@RequestMapping
是一个通用的请求映射注解,可以处理所有类型的 HTTP 请求(GET、POST、PUT、DELETE 等)。你可以通过 method
属性来指定请求类型。@GetMapping
@GetMapping
是一个专门处理 HTTP GET 请求的快捷方式注解,它是 @RequestMapping
的一种特定类型。使用 @GetMapping
可以让代码更加简洁和易读。例如:
vue 的基本标签
[HTML_REMOVED]
[HTML_REMOVED]Hello[HTML_REMOVED]
[HTML_REMOVED]
[HTML_REMOVED]
[HTML_REMOVED]
访问后端链接用 ajex来写
resp` 是服务器响应的数据。根据你的 Spring Boot 控制器的实现,服务器会返回一个 `List<String>,匹配到什么就是什么
遇到跨域问题
vue写的代码都是在user电脑上执行,user下载,遇到setup
,发送请求,看链接,根据controller路径走,若返回json对象,到resp,把前端页面值换成传过来的
今天想启动下以前的项目,发现vue脚手架用不了了,重新安装@vue/cli后,在可视化面板一点运行就报错‘spawn vue-cli-service ENO
打开代码页,提示我npm Install。在看别的资料说可能是因为新版本号和package.json文件中的nodejs和npm版本号不统一。于是(1)npm install再次尝试运行
还是失败:
Error while running task D:\vuex\vuex-todos:serve with message ‘spawn vue-cli-service ENOENT 提示我npm update
(2)执行npm update 发现package.json里的配置版本提高了
再次执行,可以运行了
以上为记录
前端页面授权 登陆状态持久化
$ gcc server_client.c -o server_client $ ./server_client 3
result is 6561
erver_client.c:33:9: warning: implicit declaration of function ‘waitpid’ [-Wimplicit-function-declaration]
33 | waitpid(pid, NULL, 0); // 回收子进程
| ^
~~CC = gcc
CFLAGS = -Wall
server_client: server_client.o
$(CC) $(CFLAGS) -o server_client server_client.o
server_client.o: server_client.c
$(CC) $(CFLAGS) -c server_client.c
clean:
rm -f server_client server_client.o
In function ‘main’:
square.c:28:9: warning: implicit declaration of function ‘waitpid’ [-Wimplicit-function-declaration]
28 | waitpid(pid, NULL, 0); //回收子进程
| ^
~~square.c:9:9: warning: unused variable ‘n’ [-Wunused-variable]
9 | int n;
Free Area:
Free Area[0]: NULL
Free Area[1]: NULL
Free Area[2]: NULL
Free Area[3]: NULL
Free Area[4]: NULL
Free Area[5]: NULL
Free Area[6]: NULL
Free Area[7]: NULL
Free Area[8]: power=19, start=0 -> NULL
Free Area[9]: NULL
Free Area[10]: NULL
Free Area:
Free Area[0]: NULL
Free Area[1]: NULL
Free Area[2]: NULL
Free Area[3]: NULL
Free Area[4]: NULL
Free Area[5]: power=18, start=262144 -> power=18, start=0 -> NULL
Free Area[6]: power=17, start=393216 -> power=17, start=262144 -> power=16, start=393216 -> power=17, start=393216 -> power=17, start=262144 -> power=18, start=262144 -> power=18, start=0 -> NULL
Free Area[7]: power=16, start=458752 -> power=16, start=393216 -> power=0, start=0 -> power=1, start=0 -> NULL
Free Area[8]: power=16, start=458752 -> power=16, start=393216 -> power=17, start=393216 -> power=17, start=262144 -> power=18, start=262144 -> power=18, start=0 -> power=17, start=262144 -> power=18, start=262144 -> power=18, start=0 -> NULL
Free Area[9]: power=16, start=458752 -> power=16, start=393216 -> power=17, start=393216 -> power=17, start=262144 -> power=18, start=262144 -> power=18, start=0 -> NULL
Free Area[10]: power=16, start=458752 -> power=16, start=393216 -> power=17, start=393216 -> power=17, start=262144 -> power=18, start=262144 -> power=18, start=0 -> NULL
Free Area:
Free Area[0]: NULL
Free Area[1]: NULL
Free Area[2]: NULL
Free Area[3]: NULL
Free Area[4]: NULL
Free Area[5]: power=18, start=262144 -> power=16, start=458752 -> power=17, start=393216 -> power=18, start=262144 -> power=18, start=0 -> NULL
Free Area[6]: power=17, start=393216 -> power=18, start=262144 -> power=16, start=458752 -> power=17, start=393216 -> power=18, start=262144 -> power=18, start=0 -> NULL
Free Area[7]: power=16, start=458752 -> power=17, start=393216 -> power=18, start=262144 -> power=16, start=458752 -> power=17, start=393216 -> power=18, start=262144 -> power=18, start=0 -> NULL
Free Area[8]: power=16, start=458752 -> power=17, start=393216 -> power=18, start=262144 -> power=18, start=262144 -> NULL
Free Area[9]: power=16, start=458752 -> power=17, start=393216 -> power=18, start=262144 -> NULL
Free Area[10]: power=16, start=458752 -> power=17, start=393216 -> power=18, start=262144 -> NULL