这两天学校让做一个项目，给了我们小组一个js模板，要我们各自分工搞一部分代码，刚学了一些皮毛，也不是特别明白，就是把这些js的代码改成vue组件 还要可以本地储存那种。
billList.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>超市账单管理系统</title>
<link rel="stylesheet" href="css/public.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="js/jquery.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<script src="./lib/vue.js"></script>
</head>
<body style="background-color: white;">
<script>
//从本地存储获取账单json对象
var bills = JSON.parse(window.localStorage.getItem('bill'));
$(function () {
//加载供应商下拉项
var p = window.localStorage.getItem('provider');
var provider = JSON.parse(p);
for (var v of provider) {
$("#gys").append("<option value='" + v.name + "'>" + v.name + "</option>")
}
//显示账单
var str = "";
for (var v of bills) {
str += "<tr>" +
"<td>" + v.id + "</td>" +
"<td>" + v.name + "</td>" +
"<td>" + v.provider + "</td>" +
"<td>" + v.sum + "</td>" +
"<td>" + v.isPay + "</td>" +
"<td>" + v.time + "</td>" +
"<td>" +
"<a href='billView.html?id=" + v.id +
"'><img src='img/read.png' alt='查看' id='ck' title='查看'/></a>" +
"<a href='billUpdate.html?id=" + v.id +
"'><img src='img/xiugai.png' alt='修改' title='修改'/></a>" +
"<a href='javascript:deleteBill(" + v.id +
")' class='removeUser'><img src='img/schu.png' alt='删除' title='删除'/></a></td>" +
"</tr>";
}
$("tbody").html(str);
});
//删除账单函数
function deleteBill(id) {
if (window.confirm('你确定要删除吗？')) {
for (var bill of bills) {
if (bill.id == id) {
//获取到json数组中此对象的下标
var billIndex = (bills || []).findIndex((bi) => bi.id === bill.id);
//通过下标删除json对象
bills.splice(billIndex, 1);
}
}
localStorage.removeItem("bill");
localStorage.setItem("bill", JSON.stringify(bills));
location.href = "billList.html";
}
}
//搜索账单函数
function queryBill() {
var name = $("#name");
var gys = $("#gys").val();
var pay = $("#pay").val();
var str = "";
for (var v of bills) {
if (gys == "" && pay == "") {
if (v.name.indexOf(name.val()) >= 0) {
str += "<tr>" +
"<td>" + v.id + "</td>" +
"<td>" + v.name + "</td>" +
"<td>" + v.provider + "</td>" +
"<td>" + v.sum + "</td>" +
"<td>" + v.isPay + "</td>" +
"<td>" + v.time + "</td>" +
"<td>" +
"<a href='billView.html?id=" + v.id +
"'><img src='img/read.png' alt='查看' id='ck' title='查看'/></a>" +
"<a href='billUpdate.html?id=" + v.id +
"'><img src='img/xiugai.png' alt='修改' title='修改'/></a>" +
"<a href='javascript:deleteBill(" + v.id +
")' class='removeUser'><img src='img/schu.png' alt='删除' title='删除'/></a></td>" +
"</tr>";
}
} else if (pay == "") {
if (v.name.indexOf(name.val()) >= 0 && v.provider == gys) {
str += "<tr>" +
"<td>" + v.id + "</td>" +
"<td>" + v.name + "</td>" +
"<td>" + v.provider + "</td>" +
"<td>" + v.sum + "</td>" +
"<td>" + v.isPay + "</td>" +
"<td>" + v.time + "</td>" +
"<td>" +
"<a href='billView.html?id=" + v.id +
"'><img src='img/read.png' alt='查看' id='ck' title='查看'/></a>" +
"<a href='billUpdate.html?id=" + v.id +
"'><img src='img/xiugai.png' alt='修改' title='修改'/></a>" +
"<a href='javascript:deleteBill(" + v.id +
")' class='removeUser'><img src='img/schu.png' alt='删除' title='删除'/></a></td>" +
"</tr>";
}
} else {
if (v.name.indexOf(name.val()) >= 0 && v.provider == gys && v.isPay == pay) {
str += "<tr>" +
"<td>" + v.id + "</td>" +
"<td>" + v.name + "</td>" +
"<td>" + v.provider + "</td>" +
"<td>" + v.sum + "</td>" +
"<td>" + v.isPay + "</td>" +
"<td>" + v.time + "</td>" +
"<td>" +
"<a href='billView.html?id=" + v.id +
"'><img src='img/read.png' alt='查看' id='ck' title='查看'/></a>" +
"<a href='billUpdate.html?id=" + v.id +
"'><img src='img/xiugai.png' alt='修改' title='修改'/></a>" +
"<a href='javascript:deleteBill(" + v.id +
")' class='removeUser'><img src='img/schu.png' alt='删除' title='删除'/></a></td>" +
"</tr>";
}
}
}
$("tbody").html(str);
}
</script>
<!--主体内容-->
<section class="publicMian">
<div class="right">
<div class="location">
<strong>你现在所在的位置是:</strong>
<span>账单管理页面</span>
</div>
<div class="search">
<span>商品名称：</span>
<input type="text" placeholder="请输入商品的名称" id="name" />
<span>供应商：</span>
<select name="tigong" id="gys">
<option value="">--请选择--</option>
</select>
<span>是否付款：</span>
<select name="fukuan" id="pay">
<option value="">--请选择--</option>
<option value="是">已付款</option>
<option value="否">未付款</option>
</select>
<input type="button" value="查询" onclick="queryBill()" />
<a href="billAdd.html" id="tj">添加订单</a>
</div>
<!--账单表格 样式和供应商公用-->
<table class="providerTable" cellpadding="0" cellspacing="0">
<thead>
<tr class="firstTr">
<th width="10%">账单编码</th>
<th width="20%">商品名称</th>
<th width="10%">供应商</th>
<th width="10%">账单金额</th>
<th width="10%">是否付款</th>
<th width="10%">创建时间</th>
<th width="30%">操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</section>
</body>
</html>
billAdd.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>超市账单管理系统</title>
<link rel="stylesheet" href="css/public.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="js/jquery.js"></script>
<script src="js/getTime.js"></script>
</head>
<body>
<script>
$(function () {
//加载供应商下拉项
var p = window.localStorage.getItem('provider');
var provider = JSON.parse(p);
for (var v of provider) {
$("#gys").append("<option value='" + v.name + "'>" + v.name + "</option>")
}
})
//从本地存储中取出bill对象数组，并转化为json
var bills = JSON.parse(window.localStorage.getItem("bill"));
//验证表单
function check() {
var id = $("#billId").val();
var flag = true;
for (var bill of bills) {
if (bill.id == id) {
alert("账单编号已存在，请重试");
flag = false;
}
}
return flag;
}
function addBill() {
//获取表单输入值
var id = $("#billId").val();
var name = $("#billName").val();
var unit = $("#billCom").val();
var num = $("#billNum").val();
var sum = $("#money").val();
var provider = $("#gys").val();
var isPay = $("input[name='zhifu']:checked").val();
//创建新的json对象
var bill = {
"id": id,
"name": name,
"unit": unit,
"num": num,
"sum": sum,
"provider": provider,
"isPay": isPay,
"time": now
};
//将新的bill添加到bills数组中
bills.push(bill);
//更新bill对象数组
window.localStorage.removeItem("bill");
window.localStorage.setItem("bill", JSON.stringify(bills));
alert("添加成功！")
location.href = "billList.html";
}
</script>
<section class="publicMian ">
<div class="right">
<div class="location">
<strong>你现在所在的位置是:</strong>
<span>账单管理页面 >> 订单添加页面</span>
</div>
<div class="providerAdd">
<form action="javascript:addBill()" onsubmit="return check()">
<!--div的class 为error是验证错误，ok是验证成功-->
<div class="">
<label for="billId">订单编码：</label>
<input type="text" name="billId" id="billId" required />
<span>*请输入订单编码</span>
</div>
<div>
<label for="billName">商品名称：</label>
<input type="text" name="billName" id="billName" required />
<span>*请输入商品名称</span>
</div>
<div>
<label for="billCom">商品单位：</label>
<input type="text" name="billCom" id="billCom" required />
<span>*请输入商品单位</span>
</div>
<div>
<label for="billNum">商品数量：</label>
<input type="text" name="billNum" id="billNum" required />
<span>*请输入大于0的正自然数，小数点后保留2位</span>
</div>
<div>
<label for="money">总金额：</label>
<input type="text" name="money" id="money" required />
<span>*请输入大于0的正自然数，小数点后保留2位</span>
</div>
<div>
<label>供应商：</label>
<select name="supplier" id="gys">
<option value="">--请选择相应的供应商--</option>
</select>
<span>*请选择供应商</span>
</div>
<div>
<label>是否付款：</label>
<input type="radio" name="zhifu" value="否" checked />未付款
<input type="radio" name="zhifu" value="是" />已付款
</div>
<div class="providerAddBtn">
<input type="submit" value="保存" style="padding: 0;"/>
<input type="button" value="返回" onclick="history.back(-1)" />
</div>
</form>
</div>
</div>
</section>
</body>
</html>
vue是框架。js是语言。vue有一套自己的实现逻辑。有data,methods,template
你们需要系统的学一遍vue 知道如何传递参数,如何设置变量之后。
再动手写项目。
需要先学习vue知识。先搭建环境，然后找一些vue的入门视频建议先学vue2
你这个是比较老的j思路了(个人觉得)vue的作为不建议添加jjs标签节点
Local storage?