一、前言
我们一直使用各种框架来实现单页应用，常用的有 React、 Vue、 AngularJS 。
那么我们来实现一个简单的 spa 应用，主要看下思路。
二、准备
新建一个名为 spa 的文件夹；
mkdir spa
cd spa
初始化
npm init -y
安装 express 来启动项目；
npm i express
三、新建
1. 项目目录结构
spa
├── package.json
├── public
│ ├── LoginIn.js
│ ├── LoginUp.js
│ ├── Nav.js
│ ├── index.html
│ └── index.js
└── server.js
2. 在根目录新建 server.js
const express = require('express');
const app = express();
app.use(express.static(__dirname + '/public'));
app.listen(3000, function() {
console.log('服务器已启动...');
});
3. 在 /public/index.html 引入 jQuery 和 入口文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>单页应用Demo</title>
</head>
<body>
<div id="root"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="./index.js" type="module"></script>
</body>
</html>
4. /public/index.js
import Nav from "./Nav.js";
new Nav;
5. /public/Nav.js
import LoginIn from "./loginIn.js";
import LoginUp from "./LoginUp.js";
//页面的导航栏
export default class Nav {
constructor() {
this.render()
this.handle()
}
//渲染函数
render() {
let template = `
<div>
功能选择
<a href="#" id="loginInBtn">登录</a>
<a href="#" id="loginUpBtn">注册</a>
</div>
<div id="container"></div>
`
$('#root').html(template)
}
handle() {
$('#loginInBtn').click(function () {
new LoginIn()
})
$('#loginUpBtn').click(function () {
new LoginUp()
})
}
}
6. /public/LoginIn.js
import LoginUp from './LoginUp.js'
export default class LoginIn {
constructor() {
this.render()
this.handle()
}
//渲染函数
render() {
let template = `
<div>
<p>
<span> 账号：</span>
<input type="text">
</p>
<p>
<span> 密码：</span>
<input type="password">
</p>
<p>
<input id="LoginIn" type="button" value="登录">
<input id='backLoginUp' type="button" value="回到注册">
</p>
</div>
`
$('#container').html(template)
}
handle() {
$('#backLoginUp').click(() => {
new LoginUp()
})
}
}
7. /public/LoginUp.js
import LoginIn from './LoginIn.js'
export default class LoginUp {
constructor() {
this.render();
this.handle();
}
//渲染函数
render(){
let template=`
<div>
<p>
<span> 账号：</span>
<input type="text">
</p>
<p>
<span> 密码：</span>
<input type="password">
</p>
<p>
<span> 电话号码：</span>
<input type="text">
</p>
<p>
<input id="LoginIn" type="button" value="注册">
<input id='backLoginUp' type="button" value="回到登录">
</p>
</div>
`;
$("#container").html(template);
}
handle() {
$('#backLoginUp').click(() => {
new LoginIn();
})
}
};
四、后言
本 demo 简单示例下单页应用的实现，望多多指教，还有什么原生 js 实现路由啥的可以网上搜索看看???。
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！