iweb，作者爱前端 - 第4页共8页

Vue项目报错：error ‘pageNo’ is defined but never used

解决方法：在package.json文件内加入如下代码：

"rules": {
	"generator-star-spacing": "off",
	"no-tabs": "off",
	"no-unused-vars": "off",
	"no-console": "off",
	"no-irregular-whitespace": "off",
	"no-debugger": "off"
},

1

2

3

4

5

6

7

8

"rules": {

"generator-star-spacing": "off",

"no-tabs": "off",

"no-unused-vars": "off",

"no-console": "off",

"no-irregular-whitespace": "off",

"no-debugger": "off"

},

前端 2020年5月10日 238

前端

SQL-NodeJs-查询留言板数据—条件（全部/显示/隐藏）分页查询

nodejs分页查询留言信息

// 查询留言板数据---条件（全部/显示/隐藏）分页查询
router.post('/getMessage', async (req, res, next) => {
	let {
		type,
		pageNo,
		pageSize
	} = req.body;
	pageNo = pageNo - 1;
	try {
		let totalAll, totalDisplay, totalHide, message, state = true;
		if (type == 'all') {
			totalAll = await querySql('select COUNT(*) from message');
			totalDisplay = await querySql('select COUNT(*) from message  where state = ?', [state]);
			if (state) {
				totalDisplay = totalDisplay[0]['COUNT(*)'];
				totalHide = totalAll[0]['COUNT(*)'] - totalDisplay;
			} else {
				totalHide = totalDisplay[0]['COUNT(*)'];
				totalDisplay = totalAll[0]['COUNT(*)'] - totalHide;
			}
			message = await querySql('select * from message order by id desc limit ?,?', [pageNo, pageSize]);
		} else {
			// 查询显示、隐藏
			state = type == 'display' ? true : false;
			totalAll = await querySql('select COUNT(*) from message');
			totalDisplay = await querySql('select COUNT(*) from message  where state = ?', [state]);
			if (state) {
				totalDisplay = totalDisplay[0]['COUNT(*)'];
				totalHide = totalAll[0]['COUNT(*)'] - totalDisplay;
			} else {
				totalHide = totalDisplay[0]['COUNT(*)'];
				totalDisplay = totalAll[0]['COUNT(*)'] - totalHide;
			}
			message = await querySql('select * from message where state = ? order by id desc limit ?,?', [state, pageNo, pageSize]);
		}
		res.send({
			code: 200,
			msg: '成功',
			pageNo: pageNo + 1,
			pageSize,
			totalAll: totalAll[0]['COUNT(*)'], //全部留言数量
			totalDisplay, //显示的留言-总数量
			totalHide, //隐藏的留言-总数量
			type, //全部、显示、隐藏
			data: message
		})
	} catch (e) {
		console.log(e)
		next(e)
	}
})

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

// 查询留言板数据---条件（全部/显示/隐藏）分页查询

router.post('/getMessage', async (req, res, next) => {

let {

type,

pageNo,

pageSize

} = req.body;

pageNo = pageNo - 1;

try {

let totalAll, totalDisplay, totalHide, message, state = true;

if (type == 'all') {

totalAll = await querySql('select COUNT(*) from message');

totalDisplay = await querySql('select COUNT(*) from message where state = ?', [state]);

if (state) {

totalDisplay = totalDisplay[0]['COUNT(*)'];

totalHide = totalAll[0]['COUNT(*)'] - totalDisplay;

} else {

totalHide = totalDisplay[0]['COUNT(*)'];

totalDisplay = totalAll[0]['COUNT(*)'] - totalHide;

}

message = await querySql('select * from message order by id desc limit ?,?', [pageNo, pageSize]);

} else {

// 查询显示、隐藏

state = type == 'display' ? true : false;

totalAll = await querySql('select COUNT(*) from message');

totalDisplay = await querySql('select COUNT(*) from message where state = ?', [state]);

if (state) {

totalDisplay = totalDisplay[0]['COUNT(*)'];

totalHide = totalAll[0]['COUNT(*)'] - totalDisplay;

} else {

totalHide = totalDisplay[0]['COUNT(*)'];

totalDisplay = totalAll[0]['COUNT(*)'] - totalHide;

}

message = await querySql('select * from message where state = ? order by id desc limit ?,?', [state, pageNo, pageSize]);

}

res.send({

code: 200,

msg: '成功',

pageNo: pageNo + 1,

pageSize,

totalAll: totalAll[0]['COUNT(*)'], //全部留言数量

totalDisplay, //显示的留言-总数量

totalHide, //隐藏的留言-总数量

type, //全部、显示、隐藏

data: message

})

} catch (e) {

console.log(e)

next(e)

}

})

2020年5月8日 540

前端

Vue-cli4脚手架搭建

Vue-cli4脚手架搭建随着vue.js越来越火爆，更多的项目都用到vue进行开发，在实际的开发项目中如何搭建开发脚手架呢，今天跟大家分享一下： Node.js 环境（npm包…

2020年5月4日 205

笔记

Visual Studio Code代码校验-eslint代码校验

Vue项目代码书写规范校验项目开启代码校验

...(config.dev.useEslint ? [createLintingRule()] : []),

1	...(config.dev.useEslint ? [createLintingRule()] : []),

Visual Studio Code插件安装插件配置打开命令版输…

2020年4月15日 589

前端

Echart曲线、折线鼠标移入数据圆点显示值

当前状态：一、添加代码：

tooltip: {
	trigger: 'item'	// 鼠标移入圆点显示时间和值
},

1

2

3

tooltip: {

trigger: 'item' // 鼠标移入圆点显示时间和值

},

效果：二、添加代码： [crayon-6287ce8f4ab5b5…

2020年4月14日 297

软件

检测电脑屏幕色域软件

简单好用点击下载

2020年3月30日 198

Vue

Vue三级导航菜单、二级导航菜单-demo下载

点击看效果 vue_elementUI GIF动图演示已压缩至459KB，点击查看处于三级菜单页面刷新浏览器仍然保持高亮状态。 HTML 0 [crayon-6287ce8f4…

2020年3月12日 152

前端

css箭头循环动画

效果 HTML

<section>
	<!-- 箭头动画css -->
	<div class="leftJT1">
		<div class="list">
			<div class="cc rowup">
				<div class="s">
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
				</div>
				<div class="s">
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
				</div>
			</div>
		</div>
		<i class="iconfont icon-weibiaoti1-copy"></i>
	</div>

	<div class="leftJT2">
		<div class="list">
			<div class="cc rowup">
				<div class="s">
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
				</div>
				<div class="s">
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
					<div class="item"></div>
				</div>
			</div>
		</div>
		<i class="iconfont icon-weibiaoti1-copy"></i>
	</div>
</section>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

</div>

</div>

</div>

</div>

</div>

</div>

</section>

CSS

section {
	width: 600px;
	height: 300px;
	border: 1px solid red;
}
/* // 箭头动画 */
@mixin jianTou($top, $left, $bjColor) {
	position: absolute;
	top: $top;
	left: $left;
	width: 4px;
	height: 30%;
	transform: rotate(90deg);

	>i {
		position: absolute;
		left: -1.2rem;
		top: -5px;
		display: block;
		color: $bjColor;
		font-size: 2rem;
		transform: rotate(-90deg);
	}

	@keyframes rowup {
		0% {
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		}

		100% {
			-webkit-transform: translate3d(0, -240px, 0);
			transform: translate3d(0, -240px, 0);
		}
	}

	.list {
		width: 4px;
		margin: 10px auto;
		position: relative;
		height: 200px;
		overflow: hidden;
	}

	.list .rowup {
		-webkit-animation: 5s rowup linear infinite normal;
		animation: 5s rowup linear infinite normal;
		position: relative;
		color: white;

		>div {
			>div {
				height: 20px;
				background-color: $bjColor;
				margin-top: 4px;
			}
		}
	}
}

.leftJT1 {
	position: relative;
	@include jianTou(0%,17%,#ffb571);
}

.leftJT2 {
	position: relative;
	@include jianTou(10%,17%,red);
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

section {

width: 600px;

height: 300px;

border: 1px solid red;

}

/* // 箭头动画 */

@mixin jianTou($top, $left, $bjColor) {

position: absolute;

top: $top;

left: $left;

width: 4px;

height: 30%;

transform: rotate(90deg);

>i {

position: absolute;

left: -1.2rem;

top: -5px;

display: block;

color: $bjColor;

font-size: 2rem;

transform: rotate(-90deg);

}

@keyframes rowup {

0% {

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

}

100% {

-webkit-transform: translate3d(0, -240px, 0);

transform: translate3d(0, -240px, 0);

}

.list {

width: 4px;

margin: 10px auto;

position: relative;

height: 200px;

overflow: hidden;

}

.list .rowup {

-webkit-animation: 5s rowup linear infinite normal;

animation: 5s rowup linear infinite normal;

position: relative;

color: white;

>div {

height: 20px;

background-color: $bjColor;

margin-top: 4px;

}

.leftJT1 {

position: relative;

@include jianTou(0%,17%,#ffb571);

}

.leftJT2 {

position: relative;

@include jianTou(10%,17%,red);

}

粘贴复制一把梭~~~

2020年3月7日 1.13K

前端

阿里云免费国内VPS_送高校在读大学生12个月免费国内VPS云服务器

2020年2月5日 13点13分更新：本活动云服务器是限量的，如果购买时价格显示不是0元应该是售完了。每天早上8点左右更新库存！本活动需要完成相关测试才可领取6个月！快到期还可…

2020年2月7日 117

前端

相册特效-旋转木马

地址：http://www.bestcyt.com/sourceCode/Album_special_effects_01/ 源码下载演示gif：

2020年2月2日 167

iweb

联系我们