布景
昨日无聊，了解了下chatgpt，寻思着要不试试他能写代码不，说干就干
页面一：登录界面
1. 写单纯的登录页面
1.1 页面要求
1.2 对应代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>前端代码示例</title>
</head>
<body>
<form>
<label for="name">名字：</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">邮箱：</label>
<input type="text" id="email" name="email"><br><br>
<button type="button" onclick="submitForm()">提交</button>
</form>
<script>
function submitForm() {
// 获取用户输入的名字和邮箱地址
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
// 判别输入是否为空
if(name.trim() === "" || email.trim() === "") {
alert("请输入名字和邮箱地址！");
return;
}
// 运用ajax提交表单数据
var xhr = new XMLHttpRequest();
xhr.open("POST", "submitForm.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200) {
alert("提交成功！");
}
}
xhr.send("name=" + name + "&email=" + email);
}
</script>
</body>
</html>
1.3 页面展现
单纯的登录页面，没有css款式，丑了点，优点是对表单做了校验，平时学习测验可以拿来用
2. 增加layui结构
2.1 修正要求
2.2 对应代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>前端代码示例</title>
<!-- 引入layui CSS -->
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css">
</head>
<body>
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-md8 layui-col-md-offset2">
<form class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">名字</label>
<div class="layui-input-block">
<input type="text" id="name" name="name" required lay-verify="required" placeholder="请输入您的名字" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-block">
<input type="text" id="email" name="email" required lay-verify="required|email" placeholder="请输入您的邮箱地址" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<button class="layui-btn" lay-submit lay-filter="submitForm">提交</button>
</div>
</form>
</div>
</div>
</div>
<!-- 引入layui JavaScript -->
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>
<script>
layui.use('form', function(){
var form = layui.form;
// 监听提交事件
form.on('submit(submitForm)', function(data){
// 获取用户输入的名字和邮箱地址
var name = data.field.name;
var email = data.field.email;
// 运用ajax提交表单数据
var xhr = new XMLHttpRequest();
xhr.open("POST", "submitForm.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200) {
// 运用layui的弹出层组件代替alert
layer.alert("提交成功！", function(){
// 关闭弹出层
layer.closeAll();
});
}
}
xhr.send("name=" + name + "&email=" + email);
// 避免表单重复提交
return false;
});
});
</script>
</body>
</html>
2.3 页面展现
这回增加了呼应的款式，也算能看了，可是…这个登录按钮都没居中，布局也不好看，还需求后期调整
3. 改造为Vue3项目
3.1 修正要求
3.2 代码展现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>前端代码示例</title>
<!-- 引入Vue3 JavaScript -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<div class="container">
<div class="row">
<div class="col-md-8 offset-md-2">
<form @submit.prevent="submitForm">
<div class="form-group">
<label for="name">名字：</label>
<input type="text" id="name" name="name" v-model="name" class="form-control" required>
</div>
<div class="form-group">
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" v-model="email" class="form-control" required>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">提交</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Vue3 JavaScript -->
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
data() {
return {
name: '',
email: '',
};
},
methods: {
submitForm() {
// 获取用户输入的名字和邮箱地址
const name = this.name.trim();
const email = this.email.trim();
// 判别输入是否为空
if(name.length === 0 || email.length === 0) {
alert('请输入名字和邮箱地址！');
return;
}
// 运用ajax提交表单数据
const xhr = new XMLHttpRequest();
xhr.open('POST', 'submitForm.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200) {
alert('提交成功！');
}
};
xhr.send(`name=${name}&email=${email}`);
// 避免表单重复提交
this.name = '';
this.email = '';
},
},
}).mount('#app');
</script>
</body>
</html>
3.3 页面展现
改造成功，可是之前款式没了，不过也很正常，layui自带款式，vue不自带。如果需求款式，在指令中增加需求，理论上可以加上去的。
页面二：后台办理体系
看了上面写的代码，感觉还可以的姿态，来个有难度点的，写个后台办理体系去
1. 后台办理体系
1.1 页面要求
1.2 对应代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>后台办理体系</title>
<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" >
</head>
<body>
<!-- 顶部导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">后台办理体系</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#home">主页 <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#user">用户办理</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#content">内容办理</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#setting">体系设置</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<!-- 左边菜单栏 -->
<nav class="col-md-2 d-none d-md-block bg-light sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">
<i class="fa fa-home"></i> <span>主页</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-user"></i> <span>用户办理</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-file-text-o"></i> <span>内容办理</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa fa-gear"></i> <span>体系设置</span>
</a>
</li>
</ul>
</div>
</nav>
<!-- 主内容区 -->
<main class="col-md-10 ml-sm-auto px-4">
<div id="home" class="my-4">
<h2>主页</h2>
<p>这是后台办理体系主页。</p>
</div>
<div id="user" class="my-4">
<h2>用户办理</h2>
<p>这是后台办理体系的用户办理页面。</p>
</div>
<div id="content" class="my-4">
<h2>内容办理</h2>
<p>这是后台办理体系的内容办理页面。</p>
</div>
<div id="setting" class="my-4">
<h2>体系设置</h2>
<p>这是后台办理体系的体系设置页面。</p>
</div>
</main>
</div>
</div>
<!-- jQuery 和 Bootstrap 4 JavaScript -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
</body>
</html>
1.3 页面展现
有那个姿态了，可是款式基本为空，而且侧边栏，头部栏的超链接为空
2. 增加款式
2.1 修正要求
2.2 对应代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>后台办理体系</title>
<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<!-- 自定义 CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 顶部导航栏 -->
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
<a class="navbar-brand" href="#">后台办理体系</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#home">主页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#user">用户办理</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#content">内容办理</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#setting">体系设置</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid mt-5">
<div class="row">
<!-- 左边菜单栏 -->
<nav class="col-md-2 d-none d-md-block bg-light sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#home">
<i class="fa fa-home fa-fw"></i> <span>主页</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#user">
<i class="fa fa-user fa-fw"></i> <span>用户办理</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#content">
<i class="fa fa-file-alt fa-fw"></i> <span>内容办理</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#setting">
<i class="fa fa-cog fa-fw"></i> <span>体系设置</span>
</a>
</li>
</ul>
</div>
</nav>
<!-- 主内容区 -->
<main role="main" class="col-md-10 ml-sm-auto col-lg-10 px-4">
<div id="home" class="my-4">
<h2>欢迎来到后台办理体系</h2>
<p>这是后台办理体系的主页，可以运用左边菜单栏进入其他模块。</p>
<p>办理体系的规划包含多种组件和插件，例如表格、图表、弹出式提示框等，可以简化办理流程，提高办理功率。</p>
</div>
<div id="user" class="my-4">
<h2>用户办理</h2>
<p>这是后台办理体系的用户办理模块，可以对体系用户进行列表展现、修正、删去等操作。</p>
<p>此模块包含多个页面，例如用户列表、用户概况、用户增加、用户修正等，可以根据需求进行组合和装备。</p>
</div>
<div id="content" class="my-4">
<h2>内容办理</h2>
<p>这是后台办理体系的内容办理模块，可以对内容进行列表展现、增加、修正、删去等操作。</p>
<p>此模块包含多个页面，例如内容列表、内容概况、内容增加、内容修正等，可以根据需求进行组合和装备。</p>
</div>
<div id="setting" class="my-4">
<h2>体系设置</h2>
<p>这是后台办理体系的体系设置模块，可以对体系参数进行装备和办理。</p>
<p>此模块包含多个页面，例如根底设置、安全设置、权限装备等，可以根据需求进行组合和装备。</p>
</div>
</main>
</div>
</div>
<!-- jQuery 和 Bootstrap 4 JavaScript -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>
2.3 页面展现
加了bootstrap的款式，可是点击跳转仍是失效。看了下代码，应该是有跳转的，可是他把子子页面代码都放在一页，看不出作用
3. 丰富页面作用
3.1 修正指令
主页增加echarts图表，为每个子页面加载对应的页面内容，点击侧边栏目后可以跳转到对应的页面
3.2 代码展现
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>后台办理体系</title>
<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<!-- 自定义 CSS -->
<link rel="stylesheet" href="style.css">
<!-- Echarts JavaScript -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
<!-- Vue 3 JavaScript -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<!-- 顶部导航栏 -->
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
<a class="navbar-brand" href="#">后台办理体系</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" v-bind:class="{ active: activeTab === 'home' }" href="#" v-on:click="activeTab = 'home'">主页</a>
</li>
<li class="nav-item">
<a class="nav-link" v-bind:class="{ active: activeTab === 'user' }" href="#" v-on:click="activeTab = 'user'">用户办理</a>
</li>
<li class="nav-item">
<a class="nav-link" v-bind:class="{ active: activeTab === 'content' }" href="#" v-on:click="activeTab = 'content'">内容办理</a>
</li>
<li class="nav-item">
<a class="nav-link" v-bind:class="{ active: activeTab === 'setting' }" href="#" v-on:click="activeTab = 'setting'">体系设置</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid mt-5">
<div class="row">
<!-- 左边菜单栏 -->
<nav class="col-md-2 d-none d-md-block bg-light sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" v-bind:class="{ active: activeTab === 'home' }" href="#" v-on:click="activeTab = 'home'">
<i class="fa fa-home fa-fw"></i> <span>主页</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" v-bind:class="{ active: activeTab === 'user' }" href="#" v-on:click="activeTab = 'user'">
<i class="fa fa-user fa-fw"></i> <span>用户办理</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" v-bind:class="{ active: activeTab === 'content' }" href="#" v-on:click="activeTab = 'content'">
<i class="fa fa-file-alt fa-fw"></i> <span>内容办理</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" v-bind:class="{ active: activeTab === 'setting' }" href="#" v-on:click="activeTab = 'setting'">
<i class="fa fa-cog fa-fw"></i> <span>体系设置</span>
</a>
</li>
</ul>
</div>
</nav>
<!-- 主内容区 -->
<main role="main" class="col-md-10 ml-sm-auto col-lg-10 px-4">
<div v-show="activeTab === 'home'" id="home" class="my-4">
<h2>欢迎来到后台办理体系</h2>
<p>这是后台办理体系的主页，可以运用左边菜单栏进入其他模块。</p>
<p>办理体系的规划包含多种组件和插件，例如表格、图表、弹出式提示框等，可以简化办理流程，提高办理功率。</p>
<div id="echart" style="width: 100%; height: 300px; margin-top: 20px;"></div>
</div>
<div v-show="activeTab === 'user'" id="user" class="my-4">
<h2>用户办理</h2>
<p>这是后台办理体系的用户办理模块，可以对体系用户进行列表展现、修正、删去等操作。</p>
<p>此模块包含多个页面，例如用户列表、用户概况、用户增加、用户修正等，可以根据需求进行组合和装备。</p>
</div>
<div v-show="activeTab === 'content'" id="content" class="my-4">
<h2>内容办理</h2>
<p>这是后台办理体系的内容办理模块，可以对内容进行列表展现、增加、修正、删去等操作。</p>
<p>此模块包含多个页面，例如内容列表、内容概况、内容增加、内容修正等，可以根据需求进行组合和装备。</p>
</div>
<div v-show="activeTab === 'setting'" id="setting" class="my-4">
<h2>体系设置</h2>
<p>这是后台办理体系的体系设置模块，可以对体系参数进行装备和办理。</p>
<p>此模块包含多个页面，例如根底设置、安全设置、权限装备等，可以根据需求进行组合和装备。</p>
</div>
</main>
</div>
</div>
<!-- jQuery 和 Bootstrap 4 JavaScript -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.bundle.min.js"></script>
<script>
Vue.createApp({
data() {
return {
activeTab: 'home',
};
},
mounted() {
// 初始化 Echarts 图表
this.initEchart();
},
methods: {
initEchart() {
const chart = echarts.init(document.getElementById('echart'));
const option = {
title: {
text: 'Echarts 示例'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['销量']
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [
{
name:'销量',
type:'line',
stack: '总量',
data:[120, 132, 101, 134, 90, 230, 210]
}
]
};
chart.setOption(option);
}
},
}).mount('#app');
</script>
</body>
</html>
3.3 页面作用
这次的确加了css款式，有点像样了；图表的代码是生成了，可是页面没有加载出来，有待改善
4. 再次晋级要求
4.1 修正指令
头部和侧边栏点击后不能跳转到对应的页面，我需求点击后会展现不同的页面作用，而不是现在把几个页面堆积在一起，而且图表也加载不出来。这次需求增加更多的动画作用，而且运用jquery.js
4.2 对应代码
index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>后台办理体系</title>
<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<!-- 自定义 CSS -->
<link rel="stylesheet" href="style.css">
<!-- Echarts JavaScript -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
<!-- Vue.js JavaScript -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- 顶部导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#">后台办理体系</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#" v-bind:class="{ active: activeTab === 'home' }"
v-on:click="setActiveTab('home')">主页</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
用户办理
</a>
<div class="dropdown-menu" aria-labelledby="userDropdown">
<a class="dropdown-item" href="#" v-bind:class="{ active: activeTab === 'user_list' }"
v-on:click="setActiveTab('user_list')">用户列表</a>
<a class="dropdown-item" href="#" v-bind:class="{ active: activeTab === 'user_add' }"
v-on:click="setActiveTab('user_add')">增加用户</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="contentDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
内容办理
</a>
<div class="dropdown-menu" aria-labelledby="contentDropdown">
<a class="dropdown-item" href="#" v-bind:class="{ active: activeTab === 'content_list' }"
v-on:click="setActiveTab('content_list')">内容列表</a>
<a class="dropdown-item" href="#" v-bind:class="{ active: activeTab === 'content_add' }"
v-on:click="setActiveTab('content_add')">增加内容</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="systemDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
体系设置
</a>
<div class="dropdown-menu" aria-labelledby="systemDropdown">
<a class="dropdown-item" href="#" v-bind:class="{ active: activeTab === 'system_base' }"
v-on:click="setActiveTab('system_base')">根底设置</a>
<a class="dropdown-item" href="#" v-bind:class="{ active: activeTab === 'system_security' }"
v-on:click="setActiveTab('system_security')">安全设置</a>
<a class="dropdown-item" href="#" v-bind:class="{ active: activeTab === 'system_permission' }"
v-on:click="setActiveTab('system_permission')">权限装备</a>
</div>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">登出</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid mt-5">
<div class="row">
<!-- 左边菜单栏 -->
<div class="col-md-2 d-none d-md-block bg-light sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#" v-bind:class="{ active: activeTab === 'home' }"
v-on:click="setActiveTab('home')">
<i class="fas fa-tachometer-alt fa-fw"></i> <span>仪表盘</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" v-bind:class="{ active: activeTab === 'user_list' }"
v-on:click="setActiveTab('user_list')">
<i class="fas fa-users fa-fw"></i> <span>用户办理</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" v-bind:class="{ active: activeTab === 'content_list' }"
v-on:click="setActiveTab('content_list')">
<i class="fas fa-cloud-upload-alt fa-fw"></i> <span>内容办理</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" v-bind:class="{ active: activeTab === 'system_base' }"
v-on:click="setActiveTab('system_base')">
<i class="fas fa-cogs fa-fw"></i> <span>体系设置</span>
</a>
</li>
</ul>
</div>
</div>
<!-- 主内容区 -->
<main role="main" class="col-md-10 ml-sm-auto col-lg-10 px-4">
<div v-show="activeTab === 'home'" class="row justify-content-between">
<div class="col-md-6">
<div class="card">
<div class="card-header bg-primary text-white">
月度销售额
</div>
<div class="card-body">
<div id="chart" style="height: 300px;"></div>
</div>
</div>
</div>
<div class="col-md-5">
<div class="card">
<div class="card-header bg-primary text-white">
热门产品排行榜
</div>
<div class="card-body">
<table class="table table-hover table-striped">
<thead>
<tr>
<th width="50">#</th>
<th>产品名称</th>
<th width="80">销售量</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>产品1</td>
<td>1000</td>
</tr>
<tr>
<td>2</td>
<td>产品2</td>
<td>900</td>
</tr>
<tr>
<td>3</td>
<td>产品3</td>
<td>800</td>
</tr>
<tr>
<td>4</td>
<td>产品4</td>
<td>700</td>
</tr>
<tr>
<td>5</td>
<td>产品5</td>
<td>600</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div v-show="activeTab === 'user_list'" class="my-4">
<h2>用户列表</h2>
<p>这里是用户办理的具体内容。</p>
</div>
<div v-show="activeTab === 'user_add'" class="my-4">
<h2>增加用户</h2>
<p>这里是增加用户的具体内容。</p>
</div>
<div v-show="activeTab === 'content_list'" class="my-4">
<h2>内容列表</h2>
<div class="table-responsive"> <table class="table table-hover table-striped"> <thead> <tr> <th width="50">#</th> <th>标题</th> <th>分类</th> <th width="80">浏览量</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>文章1</td> <td>新闻</td> <td>1000</td> </tr> <tr> <td>2</td> <td>文章2</td> <td>文娱</td> <td>900</td> </tr> <tr> <td>3</td> <td>文章3</td> <td>科技</td> <td>800</td> </tr> <tr> <td>4</td> <td>文章4</td> <td>财经</td> <td>700</td> </tr> <tr> <td>5</td> <td>文章5</td> <td>体育</td> <td>600</td> </tr> </tbody> </table> </div> </div>
<div v-show="activeTab === 'content_add'" class="my-4">
<h2>增加内容</h2>
<p>这里是增加内容的具体内容。</p>
</div>
<div v-show="activeTab === 'system_base'" class="my-4">
<h2>根底设置</h2>
<p>这里是体系根底设置的具体内容。</p>
</div>
<div v-show="activeTab === 'system_security'" class="my-4">
<h2>安全设置</h2>
<p>这里是体系安全设置的具体内容。</p>
</div>
<div v-show="activeTab === 'system_permission'" class="my-4">
<h2>权限装备</h2>
<p>这里是体系权限装备的具体内容。</p>
</div>
</main>
</div>
</div>
</div>
<!-- jQuery 和 Bootstrap 4 JavaScript -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.bundle.min.js"></script>
<!-- 自定义 JavaScript -->
<script src="app.js"></script></body> </html>
app.js
$(function() {
// 主页月度销售额图表
var chart = echarts.init(document.getElementById('chart'));
var option = {
legend: {},
tooltip: {},
dataset: {
source: [
['月份', '销售额'],
['1月', 300],
['2月', 306],
['3月', 322],
['4月', 350],
['5月', 375],
['6月', 400],
['7月', 440],
['8月', 450],
['9月', 470],
['10月', 490],
['11月', 510],
['12月', 530]
]
},
xAxis: {type: 'category'},
yAxis: {gridIndex: 0},
grid: {top: '55%', containLabel: true},
series: [
{type: 'line', smooth: true, seriesLayoutBy: 'row'}
]
};
chart.setOption(option);
});
var app = new Vue({
el: '#app',
data: {
activeTab: 'home'
},
methods: {
setActiveTab: function(tab) {
this.activeTab = tab;
}
}
});
style.css
html,
body {
height: 100%;
}
a.nav-link.active,
a.dropdown-item.active {
background-color: #f8f9fa !important;
color: #007bff !important;
}
.sidebar-sticky {
top: 56px;
}
.sidebar .nav-link i {
margin-right: 10px;
}
/* 仪表盘相关款式 */
.card-header,
.card-footer,
.card-header.bg-primary {
color: #ffffff;
}
.card-header.bg-primary {
border-bottom: 1px solid #ffffff;
}
.table td,
.table th {
padding: 0.75rem;
}
.card-footer .btn:not(:last-child) {
margin-right: 1rem;
}
/* 表格相关款式 */
.table td,
.table th {
padding: 0.75rem;
border-top: 0;
}
.table thead th {
border-bottom: 1px solid #dee2e6;
}
.table-striped tbody tr:nth-of-type(odd) {
background-color: rgba(0, 0, 0, 0.05);
}
/* 表单相关款式 */
.form-group label {
font-size: 14px;
font-weight: bold;
}
.btn-xxl {
font-size: 1.2rem;
padding: 10px 16px;
}
/* 呼应式款式 */
@media (min-width: 768px) {
.sidebar {
position: fixed;
top: 56px;
bottom: 0;
left: 0;
z-index: 1000;
padding: 50px 0 0; /* Height of navbar */
box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.1);
}
.sidebar-sticky {
position: relative;
height: calc(100vh - 56px);
overflow-y: auto;
}
.sidebar .nav-link i {
margin-right: 8px;
}
.main-content {
padding: 50px 15px 0;
}
}
@media (max-width: 767.98px) {
.sidebar {
position: fixed;
top: 56px;
bottom: 0;
left: -100%;
z-index: 1000;
width: 100%;
height: calc(100vh - 56px);
padding: 50px 0 0; /* Height of navbar */
overflow-y: auto;
transition: left 0.3s ease-out;
}
.sidebar-show .sidebar {
left: 0;
transition: left 0.3s ease-out;
}
.overlay {
z-index: 900;
position: fixed;
top: 56px;
left: 0;
width: 100%;
height: 100%;
background-color: #00000099;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease-out, visibility 0s ease-out 0.3s;
}
.sidebar-show .overlay {
opacity: 1;
visibility: visible;
transition: opacity 0.3s ease-out;
}
.main-content {
position: relative;
padding: 50px 15px 0;
}
}
/* 滚动条款式 */
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
::-webkit-scrollbar-track {
background-color: #f9f9f9;
border-radius: 5px;
}
::-webkit-scrollbar-thumb {
background-color: #007bff;
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background-color: #0062cc;
}
4.3 页面展现
这次成了，哈哈，图表也加载出来了，而且侧边栏可以成功跳转，应该可以到达初级前端的水准了，可以可以
总结
AI 真的太智能了！！！可是还需求多次的调教，也可能是因为我的指令比较模糊不够清晰，未来可期呀！
我也不由引起了一阵考虑，若一年两年后智能再次智能，是否程序员只用输入指令，AI便可主动生成所需 的页面，咱们需求做的只是微调款式。现在，这个趋势正在延伸。
偶然得知一个名为imgcook的插件，号称可以根据图片生成网页，那么是否UI只需做出原型图，便可主动生成代码？然后调用ChatGPT命令将HTML调整为指定的结构的格局，页面完结~ 再斗胆一步，若再加封装，甚至用户只需输入页面需求和参阅页面地址，AI便可主动生成规划稿，生成三四个模板网页作为挑选。
上面的设想我也是有依据的，有一款软件叫Dora, 看过它的宣扬视频，拉动图片便可主动生成内容
参阅视频: www.bilibili.com/video/BV1zh…
Dora我暂时还没用过，可是可以用ChatGPT简略模仿下，如下图，给出关键词，AI便主动可生成图画
提示词：8 位像素艺术,(云中之岛)，吉卜力作业室，电影剧照，HDR —
图画：
提示词： 拼装一个水下乐高海洋国际，展现各种海洋动物，包含鲨鱼、海豚和珊瑚礁，潜水员探究充满活力的景观并发现沉船残骸 –dream
图画：
若AI再智能一点，提示词再齐全一点，那么……
我的设想：
- 用户给出所需网站需求和参阅地址，运用AI制作三到四个原型图
- 用户挑选后，运用imgcook得到html代码
- 再调用chatgpt转化为所需结构的格局
- 页面微调，页面完结
可是，这只是前端
事实上，我对后端ai插件也有一点了解，有一款名为tabnine, 它所做的便是可以主动提示代码
写了一个测验类，我只是写了注释，下面灰色的都是AI主动推导的，多么智能！
若我们感兴趣，这也有几款类似的插件介绍，很具体：zhuanlan.zhihu.com/p/630213524
那么，后端是否只需搭建好结构结构，具体方法实现写个注释就能主动完结呢？我也刚刚接触，还在学习，不能给出清晰答复。
可是我信任，再过个一年两年，这真的会得到普及，一个人就能完结2，3个前后端程序员的作业… 那么，我们仍是越早接触越好了，3，4年前互联网的盈利现在正在消失，取而代之的是剧烈的竞赛。现在，如果抓住了AI的盈利，用好东西，我一个菜鸟的程序员，是否可以追上正式职工呢？我正在尝试。
未来的未来，一个公司或者只需求个老板收钱，客服、销售、程序员都会被AI替代。可是到那时，我们生产力大幅度提高，AI能很好的为我们服务了。又是否到了大同社会呢？钱变得没有意义，人们所需求的都能很好的被满意，身处桃花源，夜不闭户。很幸亏生在这个时代，我也期望在有生之年可以看到如此现象。
后续
/post/723768…
