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(() => {
});
}