前端相关梳理
相关概念
一、vue.js是什么？
一个vue分三部分，script标签和template标签和style标签 下面是个标准的vue
<script setup>
</script>
上面这俩是写js的地方，就是干啥
<template>
/template>
这俩是写html的地方
<style scoped>
</style>
这俩是写css的地方
举个例子，这是最简单一个网页
第一部分
<script setup>
function add(）
console.log('123');
</script>
我在干啥这里创建个函数，就是打印个123出来 ，我们需求是点击这个按钮就执行这个函数。怎么搞呢
第二部分
<template>
<div class="todo-form>
<input type="text"class="todo-input" placeholder
div| class="todo-button"Add Todo</div>
</div>
/template>
我们在html那个模块里找到Add Todo这个按钮，上面那段代码就是单纯的这个按钮，其它啥也没有，我们给他加个@click=“add” ，有没有觉得很像你在群里@别人，这个@click=“add” 的意思就是点按钮的时候执行第一部分我们定义的那个函数，当然我们也能监听更多的事情，用@就可以了。但是你太弱了就不说了。
第三部分就是CSS样式，比如在昨天的课里提了 的列表
/template> 这俩是写html的地方二 ，element-ui :
element-ui是饿了么前端出品的基于Vuejs的后台组件库，方便程序员进行页面快速布局和构建
说人话就是这玩意可以快速的应用在vue中快速的实现页面的各种效果，不需要写CSS样式，直接用这个改就可
https://element.eleme.cn/#/zh-CN/component/installation
包括昨天说的上传照片的组件，这里也是有的，也就是说你简单看下就可以
三，什么是Node.js
这个有啥用
1、nodejs是什么
（1）之前学过java，运行java需要安装jdk环境
学习的这个nodejs，是JavaScript的运行环境，用于执行JavaScript代码环境不需要浏览器，直接使用nodejs运行JavaScript代码
（2）模拟服务器效果，比如tomcat
二、代码结构
目录结构
这个可以看上面一篇文章，框架目录结构那节连接如下
https://blog.csdn.net/hanliu2003/article/details/144095875?spm=1001.2014.3001.5501
然后上一章讲师分页和条件查询那里，你参考一、vue.js是什么？那里举例子那个内容来看，会更直观
三. 续上一篇 文章，继续讲删除功能
1先加个按钮<el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteTeacherById(scope.row.id)">删除</el-button>
参照VUE那节 ，删除 就是加个个删除的按钮
2，在按钮上绑定删除的事件
@click=“deleteTeacherById(scope.row.id)” 在干啥那里绑定这么个删除的事件
3，删除数据
在绑定的删除事件里把要删除的讲师的ID值加进去（877里数据库不删除不也是要删除对应ID 的数据吗）
id就在 @click=“deleteTeacherById(scope.row.id)” 这段代码里的scope.row.id这里
deleteTeacherById则使是删除讲师的方法
删除讲师的方法如下
removeDataById(id){
teacher.deleteTeacherId(id)
.then(response =>{//删除成功
//提示信息
//回到列表页面
this.getList()
.catch(error =>{
4.你删除信息肯定要有个弹框对把，就像下面这个
你在element-ui 里找个弹框的组件改下就有这个提示框了，本项目大概就是这样
removeDataById(id) {
this.$confirm(‘此操作将永久删除讲师记录，是否继续？'，‘提示'，{
confirmButtonText：‘确定'，
cancelButtonText：‘取消‘，
type: 'warning'
}).then((）=>{1/点击确定，执行then方法
this.$message({
type: 'success'
message：‘删除成功！‘
）;
}）.catch((）=>{//点击取消，执行catch方法
this.$message({ I
type: 'info',
message:：已取消删除
)；
//回到列表页面
this.getList()
四 添加讲师
1 点击添加讲师功能，进入表单页面，输入讲师信息，同样表单也是用UI框架的表单样式
2.在路由里添加讲师
是在compent（）=> import(@(/views/edu/teacher/save)
所以在teacher里建立save.vue,然后把表单的ui代码复制到save,vue里面
el-option里又涉及到数据库，数据库里存的一般都是用ID来区分，所以我们存在数据库里的id是类似1 和2这种id，分别对应高级讲师和首席讲师
el-option:value="1"label=“高级讲师”/
<el-option:value="2"babel="首席讲师
3.添加讲师接口的方法
@PostMapping("addTeacher")
public R addTeacher(@RequestBody EduTacher eduTeacher)
boolean save = teacherService. save(eduTeacher);
if(save){
return R. ok（）;
else{
return R. error（）;
然后存在数据库里，最后在家一些类似上面删除功能里提到的一些信息提示（比如保存成功，添加成功等等），然后加上一些路由，比如回到列表页面等等
五，讲师修改
1.加修改按钮（上面介绍很多次按钮了就不说了）
2.跳到修改表单里
第一，ui是和添加那个页面是一样的
第二，要在数据库里读取讲师id，让讲师信息出现在表单里，如图
第三，改修改数据库的内容，提示信息，路由跳转等（上面说过很多次了），修改讲师信息的方法如下
updateTeacherInfd(teacher)
return request({
url:/eduservice/teacher/updateTeacher,
method:'post',
data:teacher
)
四，上传照片
卧槽，为了引入云技术，这么简单的系统整了个这玩意
这里上传照片用阿里云OSS功能，这里和前端关系不大，就做个页面就行了，具体上传后的操作都是后端在搞
五，nginx
我本来也不会前端，不知道这个nginx到底算前端还是后端管，你们这个项目老师应该也不会问这个吧，这个东西好基础，好老的技术了