web期末作业之JavaScript & TypeScript 学习总结

JavaScript是一种广泛使用的脚本语言，主要用于在网页中实现交互功能。下面是JavaScript的基本语法和一个简单的例子：

变量声明和赋值：
var x; // 变量声明
x = 5; // 变量赋值
var y = 10; // 同时声明和赋值

数据类型：

数字：var num = 5;
字符串：var str = "Hello World";
布尔值：var bool = true;
数组：var arr = [1, 2, 3];
对象：var obj = {name: "John", age: 25};
运算符：

算术运算符：+ - * / %
比较运算符：== != > < >= <=
逻辑运算符：&& || !
条件语句：
if (x > 0) {
  console.log("x是正数");
} else if (x < 0) {
  console.log("x是负数");
} else {
  console.log("x是零");
}

循环语句：
for (var i = 0; i < 5; i++) {
  console.log(i);
}

函数：
function greet(name) {
  console.log("Hello, " + name + "!");
}

greet("John"); // 输出：Hello, John!

这上面都是基础语法，与c++，Java之类的很像，不用一一细看。

然后没有怎么细学其他的，就学了一下post方法结合了vue，ts没怎么学，只是学了自己开发要用到部分，也是从B站一个图书管理系统学的代码

后端的代码，主要定义了一个书籍类，和它的get，post，edit，delete方法

class BookApi(MethodView):
def get(self, book_id):
if not book_id:
books: [Book] = Book.query.all()
results = [
{
'id': book.id,
'book_name': book.book_name,
'book_type': book.book_type,
'book_prize': book.book_prize,
'book_number': book.book_number,
'book_publisher': book.book_publisher,
'author': book.author,
} for book in books
]
return {
'status': 'success',
'message': '数据查询成功',
'results': results
}
book: Book = Book.query.get(book_id)
return {
'status': 'success',
'message': '数据查询成功',
'result': {
'id': book.id,
'book_name': book.book_name,
'book_type': book.book_type,
'book_prize': book.book_prize,
'book_number': book.book_number,
'book_publisher': book.book_publisher,
'author': book.author,
}
}

def post(self):
form = request.json
book = Book()
book.book_number = form.get('book_number')
book.book_name = form.get('book_name')
book.book_type = form.get('book_type')
book.book_prize = form.get('book_prize')
book.author = form.get('author')
book.book_publisher = form.get('book_publisher')
db.session.add(book)
db.session.commit()
# id, book_number, book_name, book_type, book_prize, author, book_publisher

return {
'status': 'success',
'message': '数据添加成功'
}

}

启动项目的代码：

import {createApp} from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

前端用的vue中的Element Plus和axios。界面部分是template中的一些模版，然后又设置了这些，handleEdit，handleDelete，resetForm按钮来负责点击页面之后的增删改查功能的实现。

例如我做的一个动态网页中，使用了axios中的get方法接受了"http://localhost:5000/books"网址的发送的信息，然后将JSON的数据进行切片。送入到一个数组的books中。然后用onMounted（）方法实现对输入的数据有了接收。删除数据也是一样的

<script setup>
import axios from 'axios'
import {reactive, ref, onMounted} from "vue";
import {ElMessageBox} from 'element-plus'
const books = reactive([])
const getStudents = () => {
axios.get("http://localhost:5000/books",).then(res => {
books.splice(0, books.length)
books.push(...res.data.results)
console.log('更新数据')
})
}
// 页面渲染之后添加数据
onMounted(() => {
getStudents()
})
const handleDelete = (index, scope) => {
  axios.delete(`http://localhost:5000/books/${scope.id}`).then(() => {
    getStudents()
  })
}

</script >

还有表单添加，重置的方法都写在里面了，对应了上面HTML的按钮。然后在编辑和添加图书的界面都设置了一个弹窗，就是点击是否确认关闭，

const handleClose = (done) => {
  ElMessageBox.confirm('确认关闭？')
      .then(() => {
        done();
      })
      .catch(() => {
      });
}