陶人超有料

小程序开发必备功能的吐血整理【个人中心界面样式大全】

个人主页：个人主页
推荐专栏：小程序开发成神之路 --(这是一个为想要入门和进阶小程序开发专门开启的精品专栏！从个人到商业的全套开发教程，实打实的干货分享，确定不来看看？ )
作者简介：一个读研中创业、打工中学习的能搞全栈、也搞算法、目前在搞大数据的奋斗者。
⭐️您的小小关注是我持续输出的动力！⭐️

干货内容推荐

入门和进阶小程序开发，不可错误的精彩内容：

《你真的会做小程序按钮吗？看了字节35K前端的样式设计，悟了》

《来接私活吧？玩转小程序开发之丝滑拆红包【附完整代码】》

《来接私活吧？小程序接私活必备功能-婚恋交友【附完整代码】》

《吐血整理的几十款小程序登陆界面【附完整代码】》

文章目录

干货内容推荐
一、引言
二、样例展示
三、源码分享
- 3.1 Code 1-1
- 3.2 Code 1-2
- 3.3 Code 1-3
- 3.4 Code 1-4
- 3.5 Code 1-5
- 3.5 Code 1-6
- 3.7 Code 1-7
- 3.8 Code 1-8
- 3.9 Code 1-9
- 3.10 Code 1-10
- 3.11 Code 1-11

一、引言

个人中心界面是小程序开发中，底部tarbar的必备元素之一！用户信息也是每个小程序必须要精心维护的重中之重！

想要给用户带来高级且享受的用户体验，一个设计精美、交互流畅的个人中心界面就显得尤为重要。

为此，我总结了这么多年来的小程序开发经验，吐血整理出了每个小程序开发者必备的开发精囊，不收藏就会后悔的那种！

二、样例展示

样式名称	样式效果	源码代号
`商城样式A`		`Code 1-1`
`通用样式A`		`Code 1-2`
`通用样式B`		`Code 1-3`
`通用样式C`		`Code 1-4`
`通用样式D`		`Code 1-5`
`通用样式E`		`Code 1-6`
`电商样式B`		`Code 1-7`
`电商样式C`		`Code 1-8`
`会员中心样式A`		`Code 1-9`
`会员样式B`		`Code 1-10`
`通用样式G`		`Code 1-11`

三、源码分享

在上个章节所提及的界面效果中，其类型从娱乐交友、生活购物覆盖到了各个应用场景。其中一些通用的样式效果，由于其元素的结构适合各个场景，因此在我的日常开发中，经常拿他们来魔改，从而打到我想要的效果。

以下是每个样例的详细代码,请君自取：

3.1 Code 1-1


<template>
	<view>
		<view class="header" v-bind:class="{'status':isH5Plus}">
			<view class="userinfo">
				<view class="face">
					<image :src="userinfo.face">image>
				view>
				<view class="info">
					<view class="username">{{userinfo.username}}view>
					<view class="integral">积分:{{userinfo.integral}}view>
				view>
			view>
			<view class="setting">
				<image src="/static/other/10.png">image>
			view>
		view>
		<view class="orders">
			<view class="box">
				<view class="label" v-for="(row,index) in orderTypeLise" :key="row.name" hover-class="hover" @tap="toOrderType(index)">
					<view class="icon">
						<view class="badge" v-if="row.badge>0">{{row.badge}}view>
						<image :src="row.icon">image>
					view>
					{{row.name}}
				view>
			view>
		view>
		<view class="list" v-for="(list,list_i) in severList" :key="list_i">
			<view class="li" v-for="(li,li_i) in list" @tap="toPage(list_i,li_i)" v-bind:class="{'noborder':li_i==list.length-1}"
			 hover-class="hover" :key="li.name">
				<view class="icon">
					<image :src="li.icon">image>
				view>
				<view class="text">{{li.name}}view>
				<image class="to" src="/static/other/youjiantou.png">image>
			view>
		view>
		<soure :url="url">soure>
	view>
template>
<script>
	export default {
		data() {
			return {
				url: 'https://ext.dcloud.net.cn/plugin?id=105',
				//#ifdef APP-PLUS
				isH5Plus: true,
				//#endif
				//#ifndef APP-PLUS
				isH5Plus: false,
				//#endif
				userinfo: {},
				orderTypeLise: [
					//name-标题 icon-图标 badge-角标
					{
						name: '待付款',
						icon: '/static/other/1.png',
						badge: 99
					},
					{
						name: '待发货',
						icon: '/static/other/2.png',
						badge: 2
					},
					{
						name: '待收货',
						icon: '/static/other/3.png',
						badge: 6
					},
					{
						name: '待评价',
						icon: '/static/other/4.png',
						badge: 9
					},
					{
						name: '退换货',
						icon: '/static/other/5.png',
						badge: 0
					}
				],
				severList: [
					[{
							name: '我的收藏',
							icon: '/static/other/6.png'
						},
						{
							name: '优惠券',
							icon: '/static/other/7.png'
						},
						{
							name: '红包',
							icon: '/static/other/8.png'
						},
						{
							name: '任务',
							icon: '/static/other/9.png'
						},
					],
					[{
							name: '积分明细',
							icon: '/static/other/1.png'
						},
						{
							name: '抽奖',
							icon: '/static/other/2.png'
						},
						{
							name: '收货地址',
							icon: '/static/other/3.png'
						}
					]
				],
			};
		},
		onLoad() {
			//加载
			this.init();
		},
		methods: {
			init() {
				//用户信息
				this.userinfo = {
					face: '/static/other/1.png',
					username: "VIP会员10240",
					integral: "1435"
				}
			},
			//用户点击订单类型
			toOrderType(index) {
				uni.showToast({
					title: this.orderTypeLise[index].name
				});
			},
			//用户点击列表项
			toPage(list_i, li_i) {
				uni.showToast({
					title: this.severList[list_i][li_i].name
				});
			}
		}
	}
script>

<style lang="scss">
	page {
		background-color: #fff
	}

	.header {
		&.status {
			padding-top: var(--status-bar-height);
		}

		background-color:#ff6364;
		width:92%;
		height:30vw;
		padding:0 4%;
		display:flex;
		align-items:center;

		.userinfo {
			width: 90%;
			display: flex;

			.face {
				flex-shrink: 0;
				width: 15vw;
				height: 15vw;

				image {
					width: 100%;
					height: 100%;
					border-radius: 100%
				}
			}

			.info {
				display: flex;
				flex-flow: wrap;
				padding-left: 30upx;

				.username {
					width: 100%;
					color: #fff;
					font-size: 40upx
				}

				.integral {
					display: flex;
					align-items: center;
					padding: 0 20upx;
					height: 40upx;
					color: #fff;
					background-color: rgba(0, 0, 0, 0.1);
					border-radius: 20upx;
					font-size: 24upx
				}
			}
		}

		.setting {
			flex-shrink: 0;
			width: 6vw;
			height: 6vw;

			image {
				width: 100%;
				height: 100%
			}
		}
	}

	.hover {
		background-color: #eee
	}

	.orders {
		background-color: #ff6364;
		width: 92%;
		height: 11vw;
		padding: 0 4%;
		margin-bottom: calc(11vw + 40upx);
		display: flex;
		align-items: flex-start;
		border-radius: 0 0 100% 100%;
		margin-top: -1upx;

		.box {
			width: 98%;
			padding: 0 1%;
			height: 22vw;
			background-color: #fefefe;
			border-radius: 24upx;
			box-shadow: 0 0 20upx rgba(0, 0, 0, 0.15);
			margin-bottom: 40upx;
			display: flex;
			align-items: center;
			justify-content: center;

			.label {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-flow: wrap;
				width: 100%;
				height: 16vw;
				color: #666666;
				font-size: 26upx;

				.icon {
					position: relative;
					width: 7vw;
					height: 7vw;
					margin: 0 1vw;

					.badge {
						position: absolute;
						width: 4vw;
						height: 4vw;
						background-color: #ec6d2c;
						top: -1vw;
						right: -1vw;
						border-radius: 100%;
						font-size: 20upx;
						color: #fff;
						display: flex;
						align-items: center;
						justify-content: center;
						z-index: 10;
					}

					image {
						width: 7vw;
						height: 7vw;
						z-index: 9;
					}
				}
			}
		}
	}

	.list {
		width: 100%;
		border-bottom: solid 26upx #f1f1f1;

		.li {
			width: 92%;
			height: 100upx;
			padding: 0 4%;
			border-bottom: solid 1upx #e7e7e7;
			display: flex;
			align-items: center;

			&.noborder {
				border-bottom: 0
			}

			.icon {
				flex-shrink: 0;
				width: 50upx;
				height: 50upx;

				image {
					width: 50upx;
					height: 50upx
				}
			}

			.text {
				padding-left: 20upx;
				width: 100%;
				color: #666
			}

			.to {
				flex-shrink: 0;
				width: 40upx;
				height: 40upx
			}
		}
	}
style>

3.2 Code 1-2

<template>
	<view class="center">
		<view class="center_top">view>
		
		<view class="avatar_box">
			<open-data class="avatar" type="userAvatarUrl">open-data>
			<open-data class="nickname" type="userNickName">open-data>
		view>
		<view class="center_box_bg">
			
			<view class="profily">
				<view class="home_menu">
					<view class="cell" v-for="(item,index) in homeMenu" :key="index">
						<image class="img" :src="item.img" mode="aspectFill">image>
						<text :class="index==1?'special':''">{{item.name}}text>
					view>
				view>
			view>
			
			<view class="arc">
				<view class="within_arc">view>
			view>
			
			<view class="list_menu">
				<view class="row" v-for="(item,index) in listMenu" :key="index">
					<image :src="item.icon" mode="aspectFill">image>
					<text>{{item.name}}text>
					<u-icon name="arrow-right" color="#B6B6B6">u-icon>
				view>
			view>
		view>
	view>
template>

<script>
	export default {
		data() {
			return {
				homeMenu: [{
					name: '主菜单1',
					img: '/static/other/2.png',
				}, {
					name: '主菜单2',
					img: '/static/other/2.png',
				}, {
					name: '主菜单3',
					img: '/static/other/2.png',
				}],

				listMenu: [{
					name: '列表菜单一',
					icon: '/static/other/1.png',
				}, {
					name: '列表菜单二',
					icon: '/static/other/2.png'
				}, {
					name: '列表菜单三 ',
					icon: '/static/other/3.png'
				}, {
					name: '列表菜单四',
					icon: '/static/other/4.png'
				}, {
					name: '列表菜单五',
					icon: '/static/other/5.png'
				}, {
					name: '列表菜单六',
					icon: '/static/other/6.png'
				}, {
					name: '列表菜单七',
					icon: '/static/other/7.png'
				}]
			};
		},
		methods: {

		},
	}
script>

<style lang="scss">
	page {
		height: 100%;
	}

	.profily,
	.profily_header {
		border-radius: 20rpx;
	}

	.center {
		height: 100%;

		&_top {
			height: 400rpx;
			background-color: $uni-bg-color;
			background-size: cover;
		}

		&_box_bg {
			background: #F9F9F9;
			position: relative;

			.profily {
				position: absolute;
				width: 90%;
				margin: 0 auto;
				top: -100rpx;
				left: 5%;
				background: #FEFEFE;
				padding: 35rpx;
				box-sizing: border-box;
				box-shadow: 1rpx 2rpx 16rpx 1rpx rgba(107, 107, 107, 0.1);
			}
		}
	}

	.avatar_box {
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		top: 70rpx;
		left: 275rpx;
		width: 200rpx;
		height: 200rpx;

		.avatar {
			height: 120rpx;
			width: 120rpx;
			background-size: 100%;
			border: 5rpx solid #FFFFFF;
			border-radius: 50%;
			overflow: hidden;
		}

		.nickname {
			color: #FFFFFF;
			padding-top: 10rpx;
			font-size: 34rpx;
			font-family: KaiTi;
		}

	}

	.home_menu {
		position: relative;
		display: flex;
		justify-content: space-around;

		.cell {
			width: 250rpx;
			font-size: 24rpx;
			text-align: center;
			display: flex;
			flex-direction: column;

			.img {
				width: 80rpx;
				height: 80rpx;
				margin: 0 auto;
				margin-bottom: 5rpx;
			}

			text {
				line-height: 20rpx;
				margin-top: 20rpx;
			}

			.special {
				border-left: 3rpx solid #CCCCCC;
				border-right: 3rpx solid #CCCCCC;
			}
		}
	}

	.arc {
		background-color: $uni-bg-color;
		height: 100rpx;
	}

	.within_arc {
		background-color: #FFFFFF;
		border-top-left-radius: 20%;
		border-top-right-radius: 20%;
		height: 100rpx;
	}

	.list_menu {
		width: 100%;
		display: inline-block;

		.row {
			font-size: 28rpx;
			letter-spacing: 1rpx;
			padding: 30rpx 5%;
			background: #FEFEFE;
			border-bottom: 1rpx solid #EEEEEE;
			overflow: hidden;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			position: relative;

			text:nth-of-type(1) {
				margin-left: 20rpx;
				width: 80%;
			}

			image {
				width: 40rpx;
				height: 40rpx;
			}

			&:nth-of-type(4) {
				margin-top: 10rpx;
			}
		}
	}
style>

3.3 Code 1-3

<template>
	<view class="center">
		<view class="center_top">view>
		
		<view class="avatar_box">
			<open-data class="avatar" type="userAvatarUrl" default-avatar="https://dev.stall.lkxlkf.com/ca/icons/default/default-icon.png">open-data>
			<open-data class="nickname" type="userNickName">open-data>
		view>
		<view class="center_box_bg">
			
			<view class="profily">
				<view class="home_menu">
					<view class="cell" v-for="(item,index) in homeMenu" :key="index">
						<image class="img" :src="item.img" mode="aspectFill">image>
						<text :class="index==1?'special':''">{{item.name}}text>
					view>
				view>
			view>
			
			<view class="list_menu">
				<view class="row" v-for="(item,index) in listMenu" :key="index">
					<image :src="item.icon" mode="aspectFill">image>
					<text>{{item.name}}text>
				view>
			view>
		view>
	view>
template>

<script>
	export default {
		data() {
			return {
				homeMenu: [{
					name: '主菜单1',
					img: '/static/other/10.png'
				}, {
					name: '主菜单2',
					img: '/static/other/10.png'
				}, {
					name: '主菜单3',
					img: '/static/other/10.png'
				}],

				listMenu: [{
					name: '列表菜单一',
					icon: '/static/other/1.png'
				}, {
					name: '列表菜单二',
					icon: '/static/other/2.png'
				}, {
					name: '列表菜单三 ',
					icon: '/static/other/3.png'
				}, {
					name: '列表菜单四',
					icon: '/static/other/4.png'
				}, {
					name: '列表菜单五',
					icon: '/static/other/5.png'
				}, {
					name: '列表菜单六',
					icon: '/static/other/6.png'
				}, {
					name: '列表菜单七',
					icon: '/static/other/7.png'
				}, {
					name: '列表菜单八',
					icon: '/static/other/8.png'
				}, {
					name: '列表菜单九',
					icon: '/static/other/9.png'
				}]
			};
		},
		methods: {

		},
	}
script>

<style lang="scss">
	page {
		height: 100%;
		background-color: #f9f9f9;
	}

	.profily,
	.profily_header {
		border-radius: 20rpx;
	}

	.center {
		height: 100%;

		&_top {
			height: 400rpx;
			background-color: #a9c6b6;
			background-size: cover;
		}

		&_box_bg {
			background: #F9F9F9;
			position: relative;

			.profily {
				position: absolute;
				width: 90%;
				margin: 0 auto;
				top: -100rpx;
				left: 5%;
				background: #FEFEFE;
				padding: 35rpx;
				box-sizing: border-box;
				box-shadow: 1rpx 2rpx 16rpx 1rpx rgba(107, 107, 107, 0.1);
			}
		}
	}

	.avatar_box {
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		top: 50rpx;
		left: 275rpx;
		width: 200rpx;
		height: 200rpx;

		.avatar {
			height: 120rpx;
			width: 120rpx;
			background-size: 100%;
			border: 5rpx solid #FFFFFF;
			border-radius: 50%;
			overflow: hidden;
		}

		.nickname {
			color: #FFFFFF;
			padding-top: 10rpx;
			font-size: 34rpx;
			font-family: KaiTi;
		}

	}

	.center_box_bg {
		padding-top: 100rpx;
	}

	.home_menu {
		position: relative;
		display: flex;
		justify-content: space-around;

		.cell {
			width: 250rpx;
			font-size: 24rpx;
			text-align: center;
			display: flex;
			flex-direction: column;

			.img {
				width: 80rpx;
				height: 80rpx;
				margin: 0 auto;
				margin-bottom: 5rpx;
			}

			text {
				line-height: 20rpx;
				margin-top: 20rpx;
			}

			.special {
				border-left: 3rpx solid #CCCCCC;
				border-right: 3rpx solid #CCCCCC;
			}
		}
	}

	.list_menu {
		padding: 50rpx 30rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		.row {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			width: 230rpx;
			height: 200rpx;
			background-color: #FFFFFF;
			box-shadow: 1rpx 2rpx 16rpx 1rpx rgba(107, 107, 107, 0.1);

			image {
				width: 60rpx;
				height: 60rpx;
			}

			text {
				padding-top: 20rpx;
				font-size: 24rpx;
			}
		}
	}
style>

3.4 Code 1-4

<template>
	<view class="center">
		<view class="logo" @click="goLogin" :hover-class="!login ? 'logo-hover' : ''">
			<image class="logo-img" src="/static/other/3.png">image>
			<view class="logo-title">
				<text class="uer-name">Hi，{{login ? uerInfo.name : '未登录'}}text>
				<text class="go-login navigat-arrow" v-if="!login">text>
			view>
		view>
		<view class="center-list">
			<view class="center-list-item border-bottom">
				<text class="list-icon">text>
				<text class="list-text">帐号管理text>
				<text class="navigat-arrow">text>
			view>
			<view class="center-list-item">
				<text class="list-icon">text>
				<text class="list-text">新消息通知text>
				<text class="navigat-arrow">text>
			view>
		view>
		<view class="center-list">
			<view class="center-list-item border-bottom">
				<text class="list-icon">text>
				<text class="list-text">帮助与反馈text>
				<text class="navigat-arrow">text>
			view>
			<view class="center-list-item">
				<text class="list-icon">text>
				<text class="list-text">服务条款及隐私text>
				<text class="navigat-arrow">text>
			view>
		view>
		<view class="center-list">
			<view class="center-list-item">
				<text class="list-icon">text>
				<text class="list-text">关于应用text>
				<text class="navigat-arrow">text>
			view>
		view>
		<soure :url="url">soure>
	view>
template>

<script>
	export default {
		data() {
			return {
				url:'https://ext.dcloud.net.cn/plugin?id=38',
				login: false,
				uerInfo: {}
			}
		},
		methods: {
			goLogin() {
				if (!this.login) {
					console.log("点击前往登录")
				}
			}
		}
	}
script>

<style>
	@font-face {
		font-family: texticons;
		font-weight: normal;
		font-style: normal;
		src: url('https://at.alicdn.com/t/font_984210_5cs13ndgqsn.ttf') format('truetype');
	}

	page,
	view {
		display: flex;
	}

	page {
		background-color: #f8f8f8;
	}

	.center {
		flex-direction: column;
	}

	.logo {
		width: 750upx;
		height: 240upx;
		padding: 20upx;
		box-sizing: border-box;
			background-color: #a9c6b6;
		flex-direction: row;
		align-items: center;
	}

	.logo-hover {
		opacity: 0.8;
	}

	.logo-img {
		width: 150upx;
		height: 150upx;
		border-radius: 150upx;
	}

	.logo-title {
		height: 150upx;
		flex: 1;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		margin-left: 20upx;
	}

	.uer-name {
		height: 60upx;
		line-height: 60upx;
		font-size: 38upx;
		color: #FFFFFF;
	}

	.go-login.navigat-arrow {
		font-size: 38upx;
		color: #FFFFFF;
	}

	.login-title {
		height: 150upx;
		align-items: self-start;
		justify-content: center;
		flex-direction: column;
		margin-left: 20upx;
	}

	.center-list {
		background-color: #FFFFFF;
		margin-top: 20upx;
		width: 750upx;
		flex-direction: column;
	}

	.center-list-item {
		height: 90upx;
		width: 750upx;
		box-sizing: border-box;
		flex-direction: row;
		padding: 0upx 20upx;
	}

	.border-bottom {
		border-bottom-width: 1upx;
		border-color: #c8c7cc;
		border-bottom-style: solid;
	}

	.list-icon {
		width: 40upx;
		height: 90upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #4cd964;
		text-align: center;
		font-family: texticons;
		margin-right: 20upx;
	}

	.list-text {
		height: 90upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #555;
		flex: 1;
		text-align: left;
	}

	.navigat-arrow {
		height: 90upx;
		width: 40upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #555;
		text-align: right;
		font-family: texticons;
	}
style>

3.5 Code 1-5

<template>
	<view>
		<view class="header">
			<view class="bg">
				<view class="box">
					<view class="box-hd">
						<view class="avator">
							<img src="/static/other/3.png">
						view>
						<view class="phone-number">187****8888view>
					view>
					<view class="box-bd">
						<view class="item">
							<view class="icon"><img src="/static/other/wx.png">view>
							<view class="text">我的通知view>
						view>
						<view class="item">
							<view class="icon"><img src="/static/other/wb.png">view>
							<view class="text">我的收藏view>
						view>
						<view class="item">
							<view class="icon"><img src="/static/other/zfb.png">view>
							<view class="text">我的客服view>
						view>
					view>
				view>
			view>
		view>
		<view class="list-content">
			<view class="list">
				<view class="li noborder">
					<view class="icon">
						<image src="/static/other/1.png">image>
					view>
					<view class="text">我的名片view>
					<image class="to" src="/static/other/youjiantou.png">image>
				view>
			view>
			<view class="list">
				<view class="li " @click="changeSkin">
					<view class="icon">
						<image src="/static/other/2.png">image>
					view>
					<view class="text">主题切换view>
					<image class="to" src="/static/other/youjiantou.png">image>
				view>
				<view class="li ">
					<view class="icon">
						<image src="/static/other/3.png">image>
					view>
					<view class="text">帮助中心view>
					<image class="to" src="/static/other/youjiantou.png">image>
				view>
				<view class="li ">
					<view class="icon">
						<image src="/static/other/4.png">image>
					view>
					<view class="text">关于我们view>
					<image class="to" src="/static/other/youjiantou.png">image>
				view>
				<view class="li ">
					<view class="icon">
						<image src="/static/other/5.png">image>
					view>
					<view class="text">意见反馈view>
					<image class="to" src="/static/other/youjiantou.png">image>
				view>
			view>
			<view class="list">
				<view class="li noborder">
					<view class="icon">
						<image src="/static/other/6.png">image>
					view>
					<view class="text">系统设置view>
					<image class="to" src="/static/other/youjiantou.png">image>
				view>
			view>
			<soure :url="url">soure>
		view>
	view>
template>
<script>
	export default {
		data() {
			return {
				url: 'https://ext.dcloud.net.cn/plugin?id=223'
			};
		},
		onLoad() {},
		methods: {}
	}
script>

<style lang="scss">
	page {
		background-color: #f1f1f1;
		font-size: 30upx;
	}

	.header {
		background: #fff;
		height: 290upx;
		padding-bottom: 110upx;

		.bg {
			width: 100%;
			height: 200upx;
			padding-top: 100upx;
			background-color: #4191ea;
		}
	}

	.box {
		width: 650upx;
		height: 280upx;
		border-radius: 20upx;
		margin: 0 auto;
		background: #fff;
		box-shadow: 0 5upx 20upx 0upx rgba(0, 0, 150, .2);

		.box-hd {
			display: flex;
			flex-wrap: wrap;
			flex-direction: row;
			justify-content: center;

			.avator {
				width: 160upx;
				height: 160upx;
				background: #fff;
				border: 5upx solid #fff;
				border-radius: 50%;
				margin-top: -80upx;
				overflow: hidden;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.phone-number {
				width: 100%;
				text-align: center;
			}
		}

		.box-bd {
			display: flex;
			flex-wrap: nowrap;
			flex-direction: row;
			justify-content: center;

			.item {
				flex: 1 1 auto;
				display: flex;
				flex-wrap: wrap;
				flex-direction: row;
				justify-content: center;
				border-right: 1px solid #f1f1f1;
				margin: 15upx 0;

				&:last-child {
					border: none;
				}

				.icon {
					width: 60upx;
					height: 60upx;

					img {
						width: 100%;
						height: 100%;
					}
				}

				.text {
					width: 100%;
					text-align: center;
					margin-top: 10upx;
				}
			}
		}
	}

	.list-content {
		background: #fff;
	}

	.list {
		width: 100%;
		border-bottom: 15upx solid #f1f1f1;
		background: #fff;

		&:last-child {
			border: none;
		}

		.li {
			width: 92%;
			height: 100upx;
			padding: 0 4%;
			border-bottom: 1px solid rgb(243, 243, 243);
			display: flex;
			align-items: center;

			&.noborder {
				border-bottom: 0
			}

			.icon {
				flex-shrink: 0;
				width: 50upx;
				height: 50upx;

				image {
					width: 50upx;
					height: 50upx;
				}
			}

			.text {
				padding-left: 20upx;
				width: 100%;
				color: #666;
			}

			.to {
				flex-shrink: 0;
				width: 40upx;
				height: 40upx;
			}
		}
	}
style>

3.5 Code 1-6

<template>
	<view class="center">
		<view class="center_top">
			<view class="mask">view>
		view>
		<view class="center_box_bg">
			<view class="profily">
				<view class="base">
					<view class="profily_header">view>
					<text>昵称text>
					<image src="/static/other/1.png">image>
				view>
				<view class="order_status">
					<view class="status" v-for="item in status">
						<image class="icon" :src="item.url" mode="aspectFill">image>
						<text>{{item.name}}text>
					view>
				view>
			view>
			<view class="baiban">

			view>
			<view class="center_menu">
				<view class="menu_item" v-for="item in menus">
					<image :src="item.icon" mode="aspectFill">image>
					<text>{{item.name}}text>
				view>
			view>
		view>
		<soure :url="url">soure>
	view>
template>

<script>
	export default {
		data() {
			return {
				url: 'https://ext.dcloud.net.cn/plugin?id=247',
				status: [{
						key: 1,
						name: '待发货',
						url: '/static/other/3.png'
					},
					{
						key: 2,
						name: '待收货',
						url: '/static/other/3.png'
					},
					{
						key: 3,
						name: '待评价',
						url: '/static/other/3.png'
					},
					{
						key: 4,
						name: '全部订单',
						url: '/static/other/3.png'
					}
				],
				menus: [{
						name: '我的收藏',
						icon: '/static/other/1.png',
						key: 1,
					},
					{
						name: '地址管理',
						icon: '/static/other/2.png',
						key: 2,
					},
					{
						name: '尺码对照表',
						icon: '/static/other/3.png',
						key: 3,
					},
					{
						name: '帮助中心',
						icon: '/static/other/4.png',
						key: 4,
					},
					{
						name: '意见反馈',
						icon: '/static/other/5.png',
						key: 5,
					},
					{
						name: '关于我们',
						icon: '/static/other/6.png',
						key: 6,
					}

				]
			};
		},
		methods: {

		},
		computed: {

		}
	}
script>

<style lang="scss">
	page {
		height: 100%;
	}

	.profily,
	.profily_header {
		border-radius: 8px;
	}

	.center {
		height: 100%;

		&_top {
			height: 18%;
			background: url('/static/other/3.png') no-repeat 0% 50%;
			background-size: cover;

			.mask {
				background: rgba(0, 0, 0, .4);
				height: 100%;
			}
		}

		&_box_bg {
			background: #F9F9F9;
			position: relative;

			.profily {
				position: absolute;
				width: 90%;
				margin: 0 auto;
				top: -100upx;
				left: 5%;
				background: #FEFEFE;
				padding: 35upx;
				box-sizing: border-box;
				box-shadow: 0px 2px 5px #EDEDED;
			}
		}
	}

	.base {
		display: flex;
		align-items: center;
		border-bottom: 2px solid #F6F6F6;
		padding-bottom: 35upx;
		position: relative;

		.profily_header {
			height: 120upx;
			width: 120upx;
			background-image: url('/static/other/3.png');
			background-size: 100%;
		}

		text {
			margin-left: 20px;
			font-size: 30upx;
		}

		image {
			position: absolute;
			height: 40upx;
			width: 40upx;
			right: 0px;
			top: 0px;
		}
	}

	.order_status {
		display: flex;
		justify-content: space-between;
		margin-top: 35upx;

		.status {
			width: 140upx;
			font-size: 24upx;
			text-align: center;
			letter-spacing: .5px;
			display: flex;
			flex-direction: column;

			.icon {
				width: 50upx;
				height: 50upx;
				margin: 0 auto;
				margin-bottom: 5px;

			}
		}
	}

	.baiban {
		background: #FEFEFE;
		height: 300upx;
	}

	.center_menu {
		width: 100%;
		display: inline-block;

		.menu_item {
			font-size: 28upx;
			letter-spacing: 1px;
			padding: 14px 5%;
			background: #FEFEFE;
			overflow: hidden;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			position: relative;
			border-bottom: 1px solid #EFEFEF;

			&:hover {
				background: #F6F6F6 !important;
			}

			&::after {
				content: '';
				width: 30upx;
				height: 30upx;
				position: absolute;
				right: 5%;
				background: url('/static/other/youjiantou.png') no-repeat;
				background-size: 100%;
			}

			text:nth-of-type(1) {
				margin-left: 10px;
			}

			image {
				width: 40upx;
				height: 40upx;
			}

			&:nth-of-type(4) {
				margin-top: 10px;
			}
		}
	}
style>

3.7 Code 1-7

<template>
	<view>
		
		<view class="head">
			<view class="info">
				<view class="user">
					<image src="/static/other/3.png">image>
					<view class="name">
						<text>niewtext>
						<text>ID: 9527text>
					view>
				view>
				<view class="btn">分享店铺view>
			view>
		view>
		
		<view class="menu-box">
			<view class="region">
				<view class="title">待处理view>
				<view class="menu-row">
					<view class="cell">
						<view class="count">33view>
						<view class="name">待付款view>
					view>
					<view class="cell">
						<view class="count">12view>
						<view class="name">待发货view>
					view>
					<view class="cell">
						<view class="count">53view>
						<view class="name">待提货view>
					view>
				view>
			view>

			<view class="region">
				<view class="title">店铺数据view>
				<view class="menu-row">
					<view class="cell">
						<view class="count">122view>
						<view class="name">今日访客view>
					view>
					<view class="cell">
						<view class="count">23view>
						<view class="name">今日订单view>
					view>
					<view class="cell">
						<view class="count">888view>
						<view class="name">今日收入view>
					view>
				view>
			view>

			<view class="region">
				<view class="title">我的商品view>
				<view class="menu-row">
					<view class="cell">
						<view class="count">54view>
						<view class="name">销售中view>
					view>
					<view class="cell">
						<view class="count">2view>
						<view class="name">待上架view>
					view>
					<view class="cell">
						<view class="count" style="color: #ff7962;font-weight: 1000;">＋view>
						<view class="name">新增商品view>
					view>
				view>
			view>
		view>
	view>
template>

<script>
script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}

	.head {
		position: relative;
		width: 100%;
		height: 400rpx;
		background-color: #ff7962;

		.info {
			padding-top: 150rpx;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.user {
				padding-left: 50rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 120rpx;
					height: 120rpx;
				}

				.name {
					padding-left: 20rpx;
					font-size: 28rpx;
					font-weight: 600;
					color: #FFFFFF;
					display: flex;
					justify-content: center;
					align-items: flex-start;
					flex-direction: column;

					text {
						line-height: 40rpx;
					}
				}
			}

			.btn {
				text-align: center;
				background-color: #ff907c;
				color: #FFFFFF;
				font-size: 30rpx;
				width: 200rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-top-left-radius: 10rpx;
				border-bottom-left-radius: 10rpx;
			}
		}
	}

	.menu-box {
		position: absolute;
		top: 300rpx;
		width: 100%;
	}

	.region {
		background-color: #FFFFFF;
		margin: 30rpx;
		border-radius: 10rpx;

		.title {
			font-size: 32rpx;
			font-weight: bold;
			padding: 30rpx;
		}

		.menu-row {
			display: flex;
			justify-content: center;
			align-items: center;

			.cell {
				width: 30%;
				height: 200rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;

				.count {
					font-size: 40rpx;
				}

				.name {
					font-size: 30rpx;
					line-height: 100rpx;
					color: #8a8a8a;
				}
			}
		}
	}
style>

3.8 Code 1-8

<template>
	<view>
		<view class="head comm-center">
			<image src="/static/other/4.png">image>
			<view class="name">niewview>
			<view class="remarks">写点什么介绍下自己把！view>
		view>
		<view class="home-menu">
			<view class="row comm-center">
				<view>￥0view>
				<view>余额view>
			view>
			<view class="row edge comm-center">
				<view>0view>
				<view>积分view>
			view>
			<view class="row comm-center">
				<view>Lv.1view>
				<view>等级view>
			view>
		view> 
		<view class="list-menu">
			<view class="cell">
				<view class="left-icon comm-center">
					<image src="/static/other/2.png">image>
				view>
				<view class="txt">我的鼻血view>
				<view class="right-icon comm-center">
					<image src="/static/other/youjiantou.png">image>
				view>
			view>
			<view class="cell">
				<view class="left-icon comm-center">
					<image src="/static/other/7.png">image>
				view>
				<view class="txt">我的眼泪view>
				<view class="right-icon comm-center">
					<image src="/static/other/youjiantou.png">image>
				view>
			view>
			<view class="cell">
				<view class="left-icon comm-center">
					<image src="/static/other/10.png">image>
				view>
				<view class="txt">我的便便view>
				<view class="right-icon comm-center">
					<image src="/static/other/youjiantou.png">image>
				view>
			view>
			<view class="cell">
				<view class="left-icon comm-center">
					<image src="/static/other/1.png">image>
				view>
				<view class="txt">我的帅气view>
				<view class="right-icon comm-center">
					<image src="/static/other/youjiantou.png">image>
				view>
			view>
		view>
	view>
template>

<script>
	export default {
		data() {
			return {
				url: 'http://www.javanx.cn/20190222/css3-radial-gradient/'
			}
		},
		methods: {

		}
	}
script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}

	.head {
		height: 400rpx;
		flex-direction: column;
		background-color: #d24839;
		color: #fbf1ef;

		image {
			width: 120rpx;
			height: 120rpx;
			border: 5rpx solid #FFFFFF;
			border-radius: 100%;
		}

		.name {
			padding-top: 30rpx;
			font-size: 35rpx;
		}

		.remarks {
			padding-top: 10rpx;
			font-size: 24rpx;
		}
	}

	.home-menu {
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin: 20rpx 0;
		height: 180rpx;
		border-radius: 5rpx;
		background-color: #FFFFFF;

		.row {
			width: 30%;
			font-size: 28rpx;
			font-weight: bold;
			flex-direction: column;

			view {
				line-height: 50rpx;
			}
		}

		.edge {
			border-left: 5rpx solid #f1f1f1;
			border-right: 5rpx solid #f1f1f1;
		}
	}

	.list-menu {
		background-color: #FFFFFF;

		.cell {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100rpx;
			border-top: 5rpx solid #f8f8f8;
 
			.left-icon {
				width: 15%;

				image {
					width: 50rpx;
					height: 50rpx;
				}
			}

			.txt {
				width: 75%;
				font-size: 26rpx;
			}

			.right-icon {
				width: 10%;

				image {
					width: 30rpx;
					height: 30rpx;
				}
			}
		}
	}
style>

3.9 Code 1-9

<template>
	<view class="box">
		<view class="top">
			<view class="region">
				<view class="img-box">
					<image src="/static/other/1.png">
					image>
				view>
				<view class="info">
					<view class="name">niewview>
					<view class="time">到期时间: 2099.09.09view>
				view>
				<view class="btn-box">
					<view class="btn">续费view>
				view>
			view>
		view>
		<view class="title">
			会员特权
		view>
		<view class="menu-box">
			<view class="menu">
				<image src="/static/other/3.png">image>
				<text>课程免费text>
			view>
			<view class="menu">
				<image src="/static/other/2.png">image>
				<text>双倍积分text>
			view>
			<view class="menu">
				<image src="/static/other/5.png">image>
				<text>专属兑换text>
			view>
			<view class="menu">
				<image src="/static/other/7.png">image>
				<text>尊贵标识text>
			view>
		view>
		<view style="height: 20rpx;margin: 50rpx 20rpx 20rpx 20rpx;background-color: #f4f4f4;">view>
		<view class="task-title">
			<view class="left">成长任务view>
			<view class="right">查看更多view>
		view>
		<view class="task-title">
			<view class="task-img-box">
				<image src="/static/other/wx.png">image>
			view>
			<view class="task-info">
				<view class="task-name">每日签到view>
				<view class="task-tip">积分+20view>
			view>
			<view class="task-btn">
				<view class="btn">签到view>
			view>
		view>
		<view class="task-title">
			<view class="task-img-box">
				<image src="/static/other/zfb.png">image>
			view>
			<view class="task-info">
				<view class="task-name">观看视频三十分钟view>
				<view class="task-tip">积分+50view>
			view>
			<view class="task-btn">
				<view class="btn">去完成view>
			view>
		view>
		<view class="task-title">
			<view class="task-img-box">
				<image src="/static/other/wb.png">image>
			view>
			<view class="task-info">
				<view class="task-name">分享视频课程view>
				<view class="task-tip">积分+40view>
			view>
			<view class="task-btn">
				<view class="btn">去完成view>
			view>
		view>
	view>
template>

<script>
	export default {
		data() {
			return {
				tagEle: [],
			};
		},
		onShow() {},

	};
script>

<style lang="scss" scoped>
	.box {
		width: 100%;
		margin: auto;
		overflow: hidden;
	}

	.top {
		position: relative;
		padding-top: 100rpx;
		width: 100%;
		height: 250rpx;
	}

	.top:after {
		width: 140%;
		height: 150px;
		position: absolute;
		left: -20%;
		top: 0;
		z-index: -1;
		content: '';
		border-radius: 0 0 50% 50%;
		background: linear-gradient(to right, #319efd, #1ccee8);
	}

	.region {
		padding: 0 50rpx;
		width: 650rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		.img-box {
			width: 100rpx;
			height: 100rpx;

			image {
				width: 100rpx;
				height: 100rpx;
			}
		}

		.info {
			padding-left: 20rpx;
			width: 400rpx;
			line-height: 55rpx;
			flex-direction: column;

			.name {
				font-size: 40rpx;
				letter-spacing: 5rpx;
				color: #FFFFFF;
			}

			.time {
				font-size: 28rpx;
				letter-spacing: 2rpx;
				color: #b3dffe;
			}
		}

		.btn-box {
			width: 150rpx;

			.btn {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 120rpx;
				height: 50rpx;
				font-size: 28rpx;
				font-weight: bold;
				border-radius: 50rpx;
				background-color: #FFFFFF;
				color: #ff9602;
				box-shadow: 5rpx 5rpx 10rpx #489dcf;
			}
		}
	}

	.title {
		width: 100%;
		letter-spacing: 10rpx;
		display: flex;
		justify-content: center;
		color: #fd9903;
		font-size: 35rpx;
		font-weight: 600;
	}

	.menu-box {
		padding: 0 50rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.menu {
			padding-top: 50rpx;
			height: 200rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			image {
				width: 100rpx;
				height: 100rpx;
			}

			text {
				padding-top: 30rpx;
				font-size: 24rpx;
				color: #808080;
			}
		}
	}

	.task-title {
		margin: 0 40rpx;
		height: 120rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2rpx solid #f5f7fe;

		.left {
			font-size: 35rpx;
			letter-spacing: 5rpx;
		}

		.right {
			font-size: 26rpx;
			color: #a0a0a0;
		}
	}

	.task-img-box {
		width: 100rpx;
		height: 150rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 60rpx;
			height: 60rpx;
		}
	}

	.task-info {
		width: 500rpx;

		.task-name {
			line-height: 50rpx;
			font-size: 30rpx;
			font-weight: 500;
		}

		.task-tip {
			font-size: 24rpx;
			font-weight: bold;
			color: #ffaa00;
		}
	}

	.task-btn {
		width: 150rpx;

		.btn {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 120rpx;
			height: 50rpx;
			color: #FFFFFF;
			font-size: 26rpx;
			border-radius: 30rpx;
			background-color: #007AFF;
			box-shadow: 5rpx 5rpx 10rpx #489dcf;
		}
	}
style>

3.10 Code 1-10

<template>
	<view class="box">
		<view class="top">
			<view class="region">
				<view class="upper">
					<view class="img-box">
						<image src="/static/other/1.png">
						image>
					view>
					<view class="info">
						<view class="name">niewview>
						<view class="no">ID: 0926view>
					view>
				view>
				<view class="lower">这个人好懒，什么都没有留下~view>
			view>
			<view class="count">
				<view class="title">
					<image src="/static/other/wx.png">image>
					<text>余额text>
				view>
				<view class="val">888.00view>
			view>
		view>
		<view class="menu-box">
			<view class="menu">
				<image src="/static/other/1.png">image>
				<text>我的订单text>
			view>
			<view class="menu">
				<image src="/static/other/1.png">image>
				<text>我的收藏text>
			view>
			<view class="menu">
				<image src="/static/other/1.png">image>
				<text>联系我们text>
			view>
			<view class="menu">
				<image src="/static/other/1.png">image>
				<text>消息中心text>
			view>
			<view class="menu">
				<image src="/static/other/1.png">image>
				<text>历史记录text>
			view>
			<view class="menu">
				<image src="/static/other/1.png">image>
				<text>版本更新text>
			view>
			<view class="menu">
				<image src="/static/other/1.png">image>
				<text>积分商城text>
			view>
			<view class="menu">
				<image src="/static/other/1.png">image>
				<text>个人中心text>
			view>
			<view class="menu">
				<image src="/static/other/1.png">image>
				<text>历史记录text>
			view>
			<view class="menu">
				<image src="/static/other/1.png">image>
				<text>版本更新text>
			view>
			<view class="menu">
				<image src="/static/other/1.png">image>
				<text>积分商城text>
			view>
			<view class="menu">
				<image src="/static/other/1.png">image>
				<text>个人中心text>
			view>
		view>
	view>
template>

<script>
	export default {
		data() {
			return {
				tagEle: [],
			};
		},
		onShow() {},

	};
script>

<style lang="scss" scoped>
	.box {
		width: 100%;
		margin: auto;
		overflow: hidden;
	}

	.top {
		position: relative;
		padding-top: 100rpx;
		width: 100%;
		height: 400rpx;
	}

	.top:after {
		width: 140%;
		height: 200px;
		position: absolute;
		left: -20%;
		top: 0;
		z-index: -1;
		content: '';
		border-radius: 0 0 60% 60%;
		background-color: #426db5;
	}

	.region {
		margin-left: 150rpx;
		width: 450rpx;

		.upper {
			display: flex;
			justify-content: center;
			align-items: center;

			.img-box {
				width: 100rpx;
				height: 100rpx;

				image {
					width: 100rpx;
					height: 100rpx;
				}
			}

			.info {
				padding-left: 30rpx;
				line-height: 55rpx;
				flex-direction: column;

				.name {
					font-size: 40rpx;
					letter-spacing: 5rpx;
					color: #FFFFFF;
				}

				.no {
					font-size: 24rpx;
					letter-spacing: 2rpx;
					color: #b3dffe;
				}
			}
		}

		.lower {
			display: flex;
			justify-content: center;
			line-height: 100rpx;
			font-size: 24rpx;
			color: #b3dffe;
		}
	}

	.count {
		display: flex;
		justify-content: space-between;
		margin-top: 35rpx;
		margin-left: 200rpx;
		width: 350rpx;
		line-height: 80rpx;
		border-radius: 50rpx;
		background-color: #FFFFFF;
		box-shadow: 0rpx 3rpx 9rpx #bdbdbd;

		.title {
			width: 50%;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 30rpx;
				height: 30rpx;
			}

			text {
				font-size: 30rpx;
				padding-left: 15rpx;
			}
		}

		.val {
			display: flex;
			justify-content: flex-end;
			padding-right: 50rpx;
			font-weight: bold;
			font-size: 30rpx;
			align-items: center;
			width: 50%;
			color: #426db5;
		}
	}

	.menu-box {
		margin: 0rpx 27rpx;
		display: flex;
		flex-wrap: wrap;
		box-shadow: 0rpx 1rpx 10rpx #ebebeb;

		.menu {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 172rpx;
			height: 220rpx;
			border-bottom: 1rpx solid #ececec;
			flex-direction: column;

			image {
				width: 60rpx;
				height: 60rpx;
			}

			text {
				padding-top: 30rpx;
				font-size: 28rpx;
			}

		}
	}
style>

3.11 Code 1-11

<template>
	<view>
		<view class="upper-box">
			<view class="tip-box">
				<view class="tip">欢迎您，niew!view>
				<view class="btn">签到赢大奖 >view>
			view>
			<view class="setting">
				<image src="/static/other/wb.png">image>
			view>
		view>
		<view class="lower-box">
			<view class="menu">
				<image src="/static/other/6.png">image>
				<text>我的收藏text>
			view>
			<view class="menu">
				<image src="/static/other/2.png">image>
				<text>我的订单text>
			view>
			<view class="menu">
				<image src="/static/other/3.png">image>
				<text>我的消息text>
			view>
			<view class="menu">
				<image src="/static/other/4.png">image>
				<text>我的钱包text>
			view>
		view>
	view>
template>

<script>
	export default {
		data() {
			return {};
		},
	};
script>

<style lang="scss">
	.upper-box {
		position: relative;
		width: 100%;
		height: 400rpx;
		border-bottom-right-radius: 50rpx;
		border-bottom-left-radius: 50rpx;
		background: linear-gradient(to right, #2859fe, #1ba0ff);

		.tip-box {
			padding: 50rpx 0 0 50rpx;

			.tip {
				font-size: 50rpx;
				line-height: 100rpx;
				color: #FFFFFF;
			}

			.btn {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 250rpx;
				height: 60rpx;
				border-radius: 50rpx;
				color: #2859fe;
				background-color: #FFFFFF;
			}
		}
		
		.setting{
			position: absolute;
			top: 50rpx;
			right: 50rpx;
			
			image{
				width: 60rpx;
				height: 60rpx;
			}
		}
	}

	.lower-box {
		position: relative;
		top: -80rpx;
		padding: 0 20rpx;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;

		.menu {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			margin: 30rpx;
			width: 250rpx;
			height: 300rpx;
			background-color: #FFFFFF;
			border-radius: 30rpx;
			box-shadow: 0 5rpx 15rpx #e1e1e1;

			image {
				width: 120rpx;
				height: 120rpx;
			}

			text {
				font-size: 28rpx;
				padding-top: 50rpx;
			}
		}
	}
style>

你可能感兴趣的:(小程序开发成神之路,前端,小程序,html5)

Long类型前后端数据不一致 igotyback 前端
响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
店群合一模式下的社区团购新发展——结合链动 2+1 模式、AI 智能名片与 S2B2C 商城小程序源码说私域人工智能小程序
摘要：本文探讨了店群合一的社区团购平台在当今商业环境中的重要性和优势。通过分析店群合一模式如何将互联网社群与线下终端紧密结合，阐述了链动2+1模式、AI智能名片和S2B2C商城小程序源码在这一模式中的应用价值。这些创新元素的结合为社区团购带来了新的机遇，提升了用户信任感、拓展了营销渠道，并实现了线上线下的完美融合。一、引言随着互联网技术的不断发展，社区团购作为一种新兴的商业模式，在满足消费者日常需
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
【加密社】Solidity 中的事件机制及其应用加密社闲侃区块链智能合约区块链
加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
广州会刊小程序开发公司哪家好｜开发多少钱费用｜专业外包服务红匣子实力推荐
在选择广州会刊小程序开发公司时，有几个关键因素需要考虑。首先，您应该确定自己的需求和目标，以便找到最合适的开发公司。其次，您需要考虑公司的经验和专业知识。最后，您还应该考虑公司的信誉和口碑。开发-联系电话：13642679953（微信同号）首先，您应该明确自己的需求和目标。会刊小程序是一种用于展示会议信息和日程安排的应用程序。在选择开发公司之前，您应该明确自己的需求，包括功能要求、设计风格和用户体
springboot+vue项目实战一-创建SpringBoot简单项目苹果酱0567 面试题汇总与解析 spring boot 后端 java 中间件开发语言
这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
博客网站制作教程 2401_85194651 java maven
首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
进销存小程序源码 PHP网络版ERP进销存管理系统全开源可二开摸鱼小号 php
可直接源码搭建部署发布后使用：一、功能模块介绍该系统模板主要有进，销，存三个主要模板功能组成，下面将介绍各模块所对应的功能；进：需要将产品采购入库，自动生成采购明细台账同时关联财务生成付款账单；销：是指对客户的销售订单记录，汇总生成产品销售明细及回款计划；存：库存的日常盘点与统计，库存下限预警、出入库台账、库存位置等。1.进购管理采购订单：采购下单审批→由上级审批通过采购入库；采购入库：货品到货>
最简单将静态网页挂载到服务器上(不用nginx) 全能全知者服务器 nginx 运维前端 html 笔记
最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
补充元象二面 Redstone Monstrosity 前端面试
1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
微信小程序开发注意事项 jun778895 微信小程序小程序
微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
python爬取微信小程序数据,python爬取小程序数据 2301_81900439 前端
大家好，小编来为大家解答以下问题，python爬取微信小程序数据，python爬取小程序数据，现在让我们一起来看看吧！Python爬虫系列之微信小程序实战基于Scrapy爬虫框架实现对微信小程序数据的爬取首先，你得需要安装抓包工具，这里推荐使用Charles，至于怎么使用后期有时间我会出一个事例最重要的步骤之一就是分析接口，理清楚每一个接口功能，然后连接起来形成接口串思路,再通过Spider的回调
字节二面 Redstone Monstrosity 前端面试
1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
前端代码上传文件余生逆风飞翔前端 javascript 开发语言
点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
uniapp实现动态标记效果详细步骤【前端开发】 2401_85123349 uni-app
第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
360前端星计划-动画可以这么玩马小蜗
动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
h5小游戏定制开发红匣子实力推荐
随着科技的不断发展，移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下，H5小游戏应运而生，为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式，正逐渐受到市场的关注和青睐。那么，什么是H5小游戏定制开发呢？它又具有哪些特点和优势呢？让我们一起来深入了解一下。首先，我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏，可以在移动端、PC端等多平台
Vue + Express实现一个表单提交九旬大爷的梦
最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo
前端知识点 ZhangTao_zata 前端 javascript css
下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
第三十一节:Vue路由:前端路由vs后端路由的了解曹老师
1.认识前端路由和后端路由前端路由相对于后端路由而言的,在理解前端路由之前先对于路由有一个基本的了解路由:简而言之,就是把信息从原地址传输到目的地的活动对于我们来说路由就是:根据不同的url地址展示不同的页面内容1.1后端路由以前咱们接触比较多的后端路由,当改变url地址时,浏览器会向服务器发送请求,服务器根据这个url,返回不同的资源内容后端路由的特点就是前端每次跳转到不同url地址,都会重新访
2021年化工自动化控制仪表考试及化工自动化控制仪表考试技巧女王219 安全生产模拟考试一点通安全生产一点通题库
题库来源：安全生产模拟考试一点通公众号小程序化工自动化控制仪表考试参考答案及化工自动化控制仪表考试试题解析是安全生产模拟考试一点通题库老师及化工自动化控制仪表操作证已考过的学员汇总，相对有效帮助化工自动化控制仪表考试技巧学员顺利通过考试。1、【单选题】辐射传热()任何介质做媒介。（A）A、不需要B、需要C、有时需要2、【单选题】同一密度的液体深度越深,压强()。（B）A、越小B、越大C、基本不变3
华雁智科前端面试题因为奋斗超太帅啦前端笔试面试问题整理 javascript 开发语言 ecmascript
1.var变量的提升题目：vara=1functionfun(){console.log(b)varb=2}fun()console.log(a)正确输出结果：undefined、1答错了，给一个大嘴巴子，错误答案输出结果为：2,1此题主要考察var定义的变量，作用域提升的问题，相当于varaa=1functionfun(){varbconsole.log(b)b=2}fun()console.l
如何建设数据中台（五）——数据汇集—打破企业数据孤岛 weixin_47088026 学习记录和总结中台数据中台程序人生经验分享
数据汇集——打破企业数据孤岛要构建企业级数据中台，第一步就是将企业内部各个业务系统的数据实现互通互联，打破数据孤岛，主要通过数据汇聚和交换来实现。企业采集的数据可以是线上采集、线下数据采集、互联网数据采集、内部数据采集等。线上数据采集主要载体分为互联网和移动互联网两种，对应有系统平台、网页、H5、小程序、App等，可以采用前端或后端埋点方式采集数据。线下数据采集主要是通过硬件来采集，例如：WiFi
分布式锁和spring事务管理暴躁的鱼锁及事务分布式 spring java
最近开发一个小程序遇到一个需求需要实现分布式事务管理业务需求用户在使用小程序的过程中可以查看景点，对景点地区或者城市标记是否想去，那么需要统计一个地点被标记的人数，以及记录某个用户对某个地点是否标记为想去，用两个表存储数据，一个地点表记录改地点被标记的次数，一个用户意向表记录某个用户对某个地点是否标记为想去。由于可能有多个用户同时标记一个地点，每个用户在前端点击想去按钮之后，后台接收到请求，从数据
前端CSS面试常见题剑亦未配妥前端面试前端 css 面试
边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子
【JS】前端文件读取FileReader操作总结程序员-张师傅前端前端 javascript 开发语言
前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI，它允许web应用程序异步读取用户计算机上的文件（或原始数据缓冲区）的内容，例如读取文件以获取其内容，并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用，尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先，你需要创建一个Fi
【前端】vue 报错:The template root requires exactly one element 程序员-张师傅前端前端 vue.js javascript
【前端】vue报错:Thetemplaterootrequiresexactlyoneelement在Vue.js中，当你遇到错误“Thetemplaterootrequiresexactlyoneelement”时，这通常意味着你的Vue组件的模板（template）根节点不是单一的元素。Vue要求每个组件的模板必须有一个根元素来包裹所有的子元素。这个错误通常出现在以下几种情况：模板中有多个并行
从单体到微服务：FastAPI ‘挂载’子应用程序的转变黑金IT fastapi 微服务 fastapi 架构
在现代Web应用开发中，模块化架构是一种常见的设计模式，它有助于将大型应用程序分解为更小、更易于管理的部分。FastAPI，作为一个高性能的PythonWeb框架，提供了强大的支持来实现这种模块化设计。通过“挂载”子应用程序，我们可以为不同的功能区域（如前端接口、管理员接口和用户中心）创建独立的应用程序，并将它们整合到一个主应用程序中。本文将详细介绍如何在FastAPI中使用“挂载”子应用程序的方
书其实只有三类西蜀石兰类
一个人一辈子其实只读三种书，知识类、技能类、修心类。知识类的书可以让我们活得更明白。类似十万个为什么这种书籍，我一直不太乐意去读，因为单纯的知识是没法做事的，就像知道地球转速是多少一样（我肯定不知道），这种所谓的知识，除非用到，普通人掌握了完全是一种负担，维基百科能找到的东西，为什么去记忆？知识类的书，每个方面都涉及些，让自己显得不那么没文化，仅此而已。社会认为的学识渊博，肯定不是站在
《TCP/IP 详解，卷1：协议》学习笔记、吐槽及其他 bylijinnan tcp
《TCP/IP 详解，卷1：协议》是经典，但不适合初学者。它更像是一本字典，适合学过网络的人温习和查阅一些记不清的概念。这本书，我看的版本是机械工业出版社、范建华等译的。这本书在我看来，翻译得一般，甚至有明显的错误。如果英文熟练，看原版更好： http://pcvr.nl/tcpip/ 下面是我的一些笔记，包括我看书时有疑问的地方，也有对该书的吐槽，有不对的地方请指正： 1.
Linux—— 静态IP跟动态IP设置 eksliang linux IP
一.在终端输入 vi /etc/sysconfig/network-scripts/ifcfg-eth0 静态ip模板如下： DEVICE="eth0" #网卡名称 BOOTPROTO="static" #静态IP（必须） HWADDR="00:0C:29:B5:65:CA" #网卡mac地址 IPV6INIT=&q
Informatica update strategy transformation 18289753290
更新策略组件：标记你的数据进入target里面做什么操作，一般会和lookup配合使用，有时候用0,1,1代表 forward rejected rows被选中，rejected row是输出在错误文件里，不想看到reject输出，将错误输出到文件，因为有时候数据库原因导致某些column不能update，reject就会output到错误文件里面供查看，在workflow的
使用Scrapy时出现虽然队列里有很多Request但是却不下载，造成假死状态酷的飞上天空 request
现象就是：程序运行一段时间，可能是几十分钟或者几个小时，然后后台日志里面就不出现下载页面的信息，一直显示上一分钟抓取了0个网页的信息。刚开始已经猜到是某些下载线程没有正常执行回调方法引起程序一直以为线程还未下载完成，但是水平有限研究源码未果。经过不停的google终于发现一个有价值的信息，是给twisted提出的一个bugfix 连接地址如下http://twistedmatrix.
利用预测分析技术来进行辅助医疗蓝儿唯美医疗
2014年，克利夫兰诊所（Cleveland Clinic）想要更有效地控制其手术中心做膝关节置换手术的费用。整个系统每年大约进行2600例此类手术，所以，即使降低很少一部分成本，都可以为诊所和病人节约大量的资金。为了找到适合的解决方案，供应商将视野投向了预测分析技术和工具，但其分析团队还必须花时间向医生解释基于数据的治疗方案意味着什么。克利夫兰诊所负责企业信息管理和分析的医疗
java 线程(一)：基础篇 DavidIsOK java 多线程线程
&nbs
Tomcat服务器框架之Servlet开发分析 aijuans servlet
最近使用Tomcat做web服务器，使用Servlet技术做开发时，对Tomcat的框架的简易分析：疑问：为什么我们在继承HttpServlet类之后，覆盖doGet(HttpServletRequest req, HttpServetResponse rep)方法后，该方法会自动被Tomcat服务器调用，doGet方法的参数有谁传递过来？怎样传递？分析之我见： doGet方法的
揭秘玖富的粉丝营销之谜与小米粉丝社区类似 aoyouzi 揭秘玖富的粉丝营销之谜
玖富旗下悟空理财凭借着一个微信公众号上线当天成交量即破百万，第七天成交量单日破了1000万;第23天时，累计成交量超1个亿……至今成立不到10个月，粉丝已经超过500万，月交易额突破10亿，而玖富平台目前的总用户数也已经超过了1800万，位居P2P平台第一位。很多互联网金融创业者慕名前来学习效仿，但是却鲜有成功者，玖富的粉丝营销对外至今仍然是个谜。　　近日，一直坚持微信粉丝营销
Java web的会话跟踪技术百合不是茶 url会话 Cookie会话 Seession会话 Java Web 隐藏域会话
会话跟踪主要是用在用户页面点击不同的页面时,需要用到的技术点会话:多次请求与响应的过程 1,url地址传递参数,实现页面跟踪技术格式:传一个参数的 url?名=值传两个参数的 url?名=值 &名=值关键代码
web.xml之Servlet配置 bijian1013 java web.xml Servlet配置
定义： <servlet> <servlet-name>myservlet</servlet-name> <servlet-class>com.myapp.controller.MyFirstServlet</servlet-class> <init-param> <param-name>
利用svnsync实现SVN同步备份 sunjing SVN 同步 E000022 svnsync 镜像
1. 在备份SVN服务器上建立版本库 svnadmin create test 2. 创建pre-revprop-change文件 cd test/hooks/ cp pre-revprop-change.tmpl pre-revprop-change 3. 修改pre-revprop-
【分布式数据一致性三】MongoDB读写一致性 bit1129 mongodb
本系列文章结合MongoDB，探讨分布式数据库的数据一致性，这个系列文章包括：数据一致性概述与CAP 最终一致性(Eventually Consistency) 网络分裂(Network Partition)问题多数据中心(Multi Data Center) 多个写者(Multi Writer)最终一致性一致性图表(Consistency Chart) 数据
Anychart图表组件-Flash图转IMG普通图的方法白糖_ Flash
问题背景：项目使用的是Anychart图表组件，渲染出来的图是Flash的，往往一个页面有时候会有多个flash图，而需求是让我们做一个打印预览和打印功能，让多个Flash图在一个页面上打印出来。那么我们打印预览的思路是获取页面的body元素，然后在打印预览界面通过$("body").append(html)的形式显示预览效果，结果让人大跌眼镜：Flash是
Window 80端口被占用 WHY? bozch 端口占用 window
平时在启动一些可能使用80端口软件的时候，会提示80端口已经被其他软件占用，那一般又会有那些软件占用这些端口呢？下面坐下总结： 1、web服务器是最经常见的占用80端口的，例如：tomcat , apache , IIS , Php等等； 2
编程之美-数组的最大值和最小值-分治法（两种形式） bylijinnan 编程之美
import java.util.Arrays; public class MinMaxInArray { /** * 编程之美数组的最大值和最小值分治法 * 两种形式 */ public static void main(String[] args) { int[] t={11,23,34,4,6,7,8,1,2,23}; int[]
Perl正则表达式 chenbowen00 正则表达式 perl
首先我们应该知道 Perl 程序中，正则表达式有三种存在形式，他们分别是：匹配：m/<regexp>;/ （还可以简写为 /<regexp>;/ ，略去 m）替换：s/<pattern>;/<replacement>;/ 转化：tr/<pattern>;/<replacemnt>;
[宇宙与天文]行星议会是否具有本行星大气层以外的权力呢? comsci
举个例子: 地球,地球上由200多个国家选举出一个代表地球联合体的议会,那么现在地球联合体遇到一个问题,地球这颗星球上面的矿产资源快要采掘完了....那么地球议会全体投票,一致通过一项带有法律性质的议案,既批准地球上的国家用各种技术手段在地球以外开采矿产资源和其它资源........ &
Oracle Profile 使用详解 daizj oracle profile 资源限制
Oracle Profile 使用详解转一、目的： Oracle系统中的profile可以用来对用户所能使用的数据库资源进行限制，使用Create Profile命令创建一个Profile，用它来实现对数据库资源的限制使用，如果把该profile分配给用户，则该用户所能使用的数据库资源都在该profile的限制之内。二、条件：创建profile必须要有CREATE PROFIL
How HipChat Stores And Indexes Billions Of Messages Using ElasticSearch & Redis dengkane elasticsearch Lucene
This article is from an interview with Zuhaib Siddique, a production engineer at HipChat, makers of group chat and IM for teams. HipChat started in an unusual space, one you might not
循环小示例，菲波拉契序列，循环解一元二次方程以及switch示例程序 dcj3sjt126com c 算法
# include <stdio.h> int main(void) { int n; int i; int f1, f2, f3; f1 = 1; f2 = 1; printf("请输入您需要求的想的序列："); scanf("%d", &n); for (i=3; i<n; i
macbook的lamp环境 dcj3sjt126com lamp
sudo vim /etc/apache2/httpd.conf /Library/WebServer/Documents 是默认的网站根目录重启Mac上的Apache服务这个命令很早以前就查过了，但是每次使用的时候还是要在网上查：停止服务：sudo /usr/sbin/apachectl stop 开启服务：s
java ArrayList源码下 shuizhaosi888 ArrayList源码
版本 jdk-7u71-windows-x64 JavaSE7 ArrayList源码上：http://flyouwith.iteye.com/blog/2166890 /** * 从这个列表中移除所有c中包含元素 */ public boolean removeAll(Collection<?> c) {
Spring Security（08）——intercept-url配置 234390216 Spring Security intercept-url 访问权限访问协议请求方法
intercept-url配置目录 1.1 指定拦截的url 1.2 指定访问权限 1.3 指定访问协议 1.4 指定请求方法 1.1 &n
Linux环境下的oracle安装 jayung oracle
linux系统下的oracle安装本文档是Linux(redhat6.x、centos6.x、redhat7.x) 64位操作系统安装Oracle 11g(Oracle Database 11g Enterprise Edition Release 11.2.0.4.0 - 64bit Production)，本文基于各种网络资料精心整理而成，共享给有需要的朋友。如有问题可联系：QQ：52-7
hotspot虚拟机 leichenlei java HotSpot jvm 虚拟机文档
JVM参数 http://docs.oracle.com/javase/6/docs/technotes/guides/vm/index.html JVM工具 http://docs.oracle.com/javase/6/docs/technotes/tools/index.html JVM垃圾回收 http://www.oracle.com
读《Node.js项目实践：构建可扩展的Web应用》 ——引编程慢慢变成系统化的“砌砖活” noaighost Web node.js
读《Node.js项目实践：构建可扩展的Web应用》 ——引编程慢慢变成系统化的“砌砖活” 眼里的Node.JS 初初接触node是一年前的事，那时候年少不更事。还在纠结什么语言可以编写出牛逼的程序，想必每个码农都会经历这个月经性的问题：微信用什么语言写的？facebook为什么推荐系统这么智能，用什么语言写的？dota2的外挂这么牛逼，用什么语言写的？……用什么语言写这句话，困扰人也是阻碍
快速开发Android应用 rensanning android
Android应用开发过程中，经常会遇到很多常见的类似问题，解决这些问题需要花时间，其实很多问题已经有了成熟的解决方案，比如很多第三方的开源lib，参考 Android Libraries 和 Android UI/UX Libraries。编码越少，Bug越少，效率自然会高。但可能由于根本没听说过、听说过但没用过、特殊原因不能用、自己已经有了解决方案等等原因，这些成熟的解决
理解Java中的弱引用 tomcat_oracle java 工作面试
　不久之前，我面试了一些求职Java高级开发工程师的应聘者。我常常会面试他们说，“你能给我介绍一些Java中得弱引用吗？”，如果面试者这样说，“嗯，是不是垃圾回收有关的？”，我就会基本满意了，我并不期待回答是一篇诘究本末的论文描述。　　然而事与愿违，我很吃惊的发现，在将近20多个有着平均5年开发经验和高学历背景的应聘者中，居然只有两个人知道弱引用的存在，但是在这两个人之中只有一个人真正了
标签输出html标签" target="_blank">关于标签输出html标签 xshdch jsp
http://back-888888.iteye.com/blog/1181202 关于<c:out value=""/>标签的使用，其中有一个属性是escapeXml默认是true(将html标签当做转移字符，直接显示不在浏览器上面进行解析)，当设置escapeXml属性值为false的时候就是不过滤xml，这样就能在浏览器上解析html标签， &nb