加入LESS预处理器和Webpack配置实现

最新推荐文章于 2024-11-01 15:20:02 发布

S_yeol

最新推荐文章于 2024-11-01 15:20:02 发布

阅读量200

点赞数

文章标签： node.js es6 vue.js

本文链接：https://blog.csdn.net/qq_45228525/article/details/105990649

版权

效果图：
在这里插入图片描述
结构图 node-modules自定义

一、关键代码：
1.dist-index.html

我的第一个界面

	<!-- <link rel="stylesheet" href="static/font/iconfont.css" />		 -->
<link href="css/index.css" rel="stylesheet"></head>
<body>
		<div class="content">
			<div class="header">
				<div class="header-wrap">
					<span class="iconfont icon-baseline-search-px"></span>
					<input class="input" type="search" placeholder="请输入查询的内容" />					
				</div>				
			</div>
			<div class="main">
				3177102502 曾怡
			</div>
			<div class="footer">
				<div class="footer-wrap" >
					<img id="btn1" src="${require('./static/png/home.png')}" >
					</img>
					<img id="btn2" class="img-no-active"  src="${require('./static/png/chat.png')}" >
					</img>
					<img id="btn3" class="img-no-active"  src="${require('./static/png/edit.png')}" >
					</img>
					<img id="btn4" class="img-no-active"  src="${require('./static/png/manager.png')}" >
					</img>
				</div>
			</div>
		</div>
	</body>
	<script src="../dist/main.js">	</script>
</html>

2.dist-css

.content {
  width: 100%;
  height: 100%;
}
.header {
  width: 100%;
  height: 70px;
  position: fixed;
  left: 0;
  top: 0;
  background: #708090;
}
.search-warp {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 15px;
  margin-top: 20px;
  height: 30px;
  background: white;
  width: 80%;
  border-radius: 10px;
}
.input-wrap {
  width: 80%;
  border: none;
  outline: none;
}
.footer {
  width: 100%;
  height: 40px;
  position: fixed;
  left: 0;
  bottom: 0;
  background: #708090;
}
.batBar {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-top: 5px;
}
.myicon {
  font-size: 28px;
  line-height: 28px;
  color: black;
}
.name {
  text-align: center;
  line-height: 200px;
}

3.mock-mockData.js

//mockData.js
let Mock = require('mockjs');
var Random = Mock.Random
function buildData() {
	let data=[];
	for(var i = 1; i <= 15; i++) {
		data.push(
			Mock.mock({
				'id': i,
				'studentId': /5187101[0-9]{3}/,
				'name': '@cname',
				'pic':Random.image('400x400',Random.color()),
				'gentle|1': ['男', '女'],
				'classname': /2018级软件工程[1-5]{1}班/,
				'address': '@province' + '@city' + '@county'
			})
		);
	}
	
	var result={
		len:data.length,
		msgCode:0,
		data:data
	}
	return result;
}
Mock.mock(RegExp('/api/students'),'get',buildData());

4.mock-testMock.js

let Mock = require('mockjs');
var Random = Mock.Random;
let data=Mock.mock({
     'studentId': /5187101[0-9]{3}/,
     'name':'@cname',
     'pic':Random.image('400x400',Random.color()),
     'gentle|1': ['男', '女'],
     'classname': /2018级软件工程[1-5]{1}班/,
     'address': '@province' + '@city' + '@county'
})
console.log(data);

5.home.html

< 我的第一个界面

```

6.index.js

import "./static/less/demo.less"
// import "./static/css/demo.css"
import"./static/font/iconfont.css"
import"./static/iconfont/iconfont.css"
import axios from "axios"
import "../mock/mockData.js"

var info = document.getElementsByClassName("main");

btn1.addEventListener("click", clickHandler);
btn2.addEventListener("click", clickHandler);
btn3.addEventListener("click", clickHandler);
btn4.addEventListener("click", clickHandler);

function reset() {
	document.getElementById("btn1").className = "img-no-active" ;
	document.getElementById("btn2").className = "img-no-active";
	document.getElementById("btn3").className = "img-no-active";
	document.getElementById("btn4").className = "img-no-active";
}

function clickHandler(e) {
	reset();
	e.target.className= "";
	switch (e.target.id) {
		case 'btn1':
			axios.get("http://localhost:8090/api/students")
			.then((res)=>{
				console.log(res);
				console.log(res.data.data[0]);
				var html = '';
				for (var i=0; i<res.data.data.length; i++){
					var stu = res.data.data[i];
					html += `
					<img style='width:200px' src='${stu.pic}'></img>
					<div>${stu.studentId}</div>
					<div>${stu.name}(${stu.gentle})</div>
					<hr>
					`;
				}
				info[0].innerHTML=html;
			});
			break;
		case 'btn2':
			axios.get("/api/students").then(
				function(res) {
					// console.log(res.data)
				}
			)
			break;
	}
}