vue
:class="show?'many-txt':'all-txt'" v-show="'many-txt'?'show':'!show'"
https://elm-api.caibowen.net/
https://elm.cangdu.org/bos/v2/users/1/orders?limit=10&offset=0
前提安装好node不再赘述
可以在自带的命令行中运行,也可以在webstome中运行
安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装webpack;这一步可以省略
cnpm install webpack -g
全局安装Vue
cnpm install -g vue
全局安装Vue脚手架
cnpm install -g vue-cli
使用脚手架创建新项目;要先使用cd 命令转到要放置项目的目录
vue init webpack my-project
接下来会有项目的配置;
你看不懂无所谓;一路按enter就行
注意：看到eslint字样选no
完成后安装项目依赖文件;先cd命令转到项目的根目录
cnpm install
接下来可以启动监听端口了（先进入项目所在目录）
npm run dev
你可以看到一个演示的例子
剩下的就是写Vue了;至于怎么写，加油哦！
https://www.npmjs.com/package/vue-axios
npm install --save axios vue-axios
https://element.eleme.cn/#/zh-CN
npm i element-ui -S
ant
https://www.antdv.com/components/button-cn/
Vant
https://youzan.github.io/vant/#/zh-CN/
https://www.cnblogs.com/cedd/p/12529969.html
接口
https://github.com/bailicangdu/node-elm/blob/master/API.md
https://github.com/bailicangdu/vue2-elm
https://elm.cangdu.org/v1/captchas
https://elm.cangdu.org/v2/login
Vue菜鸟教程
https://www.runoob.com/vue2/vue-tutorial.html
Vue elment ui
npm i element-ui -S
import ElementUI from 'element-ui';
Vue.use(ElementUI);
https://elm.cangdu.org/v2/index_entry
https://element.eleme.cn/#/zh-CN/component/table
https://echarts.apache.org/examples/zh/index.html
v-charts.js.
EChars
https://www.highcharts.com.cn/docs
印记中文
后台管理系统
https://preview.pro.antdv.com/account/centerjson
解析
overflow : hidden;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
less
安装错误时
npm uninstall less-loader //御卸
1.安装
npm install less@3.9.0
npm install less-loader@4.1.0
或者
npm install less@3.12.2
npm install less-loader@7.1.0
2.引入main.js
Vue.use(less,less_loader);
import less from 'less';
import less_loader from 'less-loader';
- <style lang="less" scoped>
- 动画
"animate.css": "^4.1.1",
import animate from 'animate.css'
https://www.jq22.com/yanshi819/
jquery
npm install jquery@3.5.1
Import jquery from "jquery";
Vue.use(jquery)
module.exports ={
devServer:{
proxy:{
'api':{
//服务器端接口地址
target:'http://192.168.0.178:8081',
//
ws:true,
//是否跨域
changeOrigin:true,
pathRewrite:{
'^/api':'/'
}
}
}
}
}
import axios from 'axios';
//拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
if (response.status == 200) {
return response.data;
}
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
export default {
//注册
postRegistered(reader) {
return axios.post('api/user/', reader)
},
//首页数据加载
getHome() {
return axios.get('api/show/')
},
//数据详情页
getDetail(id) {
return axios.get('api/show/details/', { params: { id } });
},
//最新专题
getTopic() {
return axios.get('/api/Latest/')
},
//详情
getTopicDetail(id) {
return axios.get('/api/Latest/details/', { params: { id } })
},
}
随机方法
function getRandomArrayElements(arr, count) {
var shuffled = arr.slice(0), i = arr.length, min = i - count, temp, index;
while (i-- > min) {
index = Math.floor((i + 1) * Math.random());
temp = shuffled[index];
shuffled[index] = shuffled[i];
shuffled[i] = temp;
}
return shuffled.slice(min);
}
if (temp != null) {
this.recommend.push(getRandomElements(temp, 5));
}
组件库vue
http://v1.iviewui.com/components/carousel
php
https://www.runoob.com/php/php-cookies.html
http://49.75.237.10:8888/pIZTgfFa
宝塔
http://127.0.0.1:8888/pIZTgfFa
hjyfLPLI
X47tu6yC
移动端适配
npm i lib-flexible -S1
npm i px2rem-loader -D
- 1
// main.js
import 'lib-flexible'
买房记
https://www.taptap.com/app/17225/topic?type=feed&sort=default&page=3
https://dl.pconline.com.cn/download/2768186.html
npm run lint
antdv
https://www.antdv.com/docs/vue/introduce-cn/
Echarts
npm install echarts --save
methods: {
init () {
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts')
// 引入柱状图
require('echarts/lib/chart/pie')
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
var myChart = echarts.init(document.getElementById('myChart'))
myChart.setOption({
title: {
text: '某站点用户访问来源',
subtext: '纯属虚构',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: [
{ value: 335, name: '直接访问' },
{ value: 310, name: '邮件营销' },
{ value: 234, name: '联盟广告' },
{ value: 135, name: '视频广告' },
{ value: 1548, name: '搜索引擎' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: `rgba(0, 0, 0, 0.5)`
}
}
}
]
})
}
},
mounted () {
this.$nextTick(() => {
this.init()
})
}
<div id="myChart" ref="myChart" style="width: 600px; height: 400px"></div>
可视化
https://echarts.apache.org/examples/zh/index.html
v-charts.js.
分页
import { deviceMixin } from '@/store/device-mixin';
<template>
<!-- 数据统计 -->
<div class="statistics-page">
<div class="atatistics-top">
<div @click="Monitor()" class="div">
<div class="divimg">
<img src="../../assets/icons/imgs/zzwd.png" alt="" />
<div>
<p><strong>{{ userList.length }}人</strong></p>
<p>总注册人数</p>
</div>
</div>
<div class="strong"><strong>今日注册人数：</strong><span>{{ register.length }}人</span></div>
</div>
<div @click="Group" class="div">
<div class="divimg" style="border-bottom: 4px solid #4e9bdd">
<img src="../../assets/icons/imgs/qqq.png" alt="" />
<div>
<p><strong>{{ selectGroup.length }}个</strong></p>
<p>总群</p>
</div>
</div>
<div class="strong"><strong>今日创建群：</strong><span>23423423个</span></div>
</div>
<div @click="Blacklists" class="div">
<div class="divimg" style="border-bottom: 4px solid #6ac1be">
<img src="../../assets/icons/imgs/g.png" alt="" />
<div>
<p><strong>冻结人数：{{ freeze.length }}人</strong></p>
<p>冻结群个数：{{ crowd.length }}个</p>
</div>
</div>
<div class="strong"><strong>今日冻结人数</strong><span>今日冻结群个数</span></div>
</div>
<div @click="edituser" class="div">
<div class="divimg" style="border-bottom: 4px solid #51b8d7">
<img src="../../assets/icons/imgs/jzhi.png" alt="" />
<div>
<p><strong>123232</strong></p>
<p>总封停人数</p>
</div>
</div>
<div class="strong"><strong>今日封停人数：</strong><span>23423423人</span></div>
</div>
<div @click="Friends" class="div">
<!-- #c183c3 -->
<div class="divimg" style="border-bottom: 4px solid #c183c3">
<img src="../../assets/icons/imgs/pyq.png" alt="" />
<div>
<p><strong>{{ friendarr.length }}条</strong></p>
<p>总条数</p>
</div>
</div>
<div class="strong"><strong>今日发布条数：</strong><span>{{ registerfriend.length }}条</span></div>
</div>
</div>
<!-- 性别比例 -->
<div class="pie">
<div class="myChart">
<div id="myChart" ref="myChart" style=" width: 100%; height: 25rem"></div>
</div>
<!-- 每天注册人数 -->
<div class="Bar">
<div id="main" ref="myChart" style="width: 68rem; height: 25rem;padding:6px 0 0 6px;"></div>
</div>
</div>
<!-- 每月注册人数 -->
<div class="registered-persons">
<div class="line">
<div id="line" ref="myChart" style="width: 78rem; height: 26rem"></div>
</div>
<div class="line-right">
<div class="text-al">每月注册人数</div>
<div class="line-top" v-for="c in 12" :key="c">
<p class="p1"><span>{{ c }}</span>{{ c }}月</p>
<p class="p2">45345人</p>
</div>
</div>
</div>
<!-- 成员比列分布-->
<div class="memberships">
<div class="membership-left">
<p class="p"><strong>成员分布比列</strong></p>
<div>
<!-- '#ffb43f', '', '#2da1f7' -->
<a-progress strokeColor="#ffb43f" type="circle" :percent="parseInt(seventy.length/userList.length*100)" />
<p><strong>70后：</strong> {{ seventy.length }}人</p>
</div>
<div>
<a-progress strokeColor="#ea66a6" type="circle" :percent="parseInt(eighty.length/userList.length*100)" />
<p><strong>80后：</strong>{{ eighty.length }}人</p>
</div>
<div>
<a-progress strokeColor="#2da1f7" type="circle" :percent="parseInt(ninety.length/userList.length*100)" />
<p><strong>90后：</strong> {{ ninety.length }}人</p>
</div>
<div>
<a-progress strokeColor="#fd2142" type="circle" :percent="parseInt(ninetyfive.length/userList.length*100)" />
<p><strong>95后：</strong>{{ ninetyfive.length }}人</p>
</div>
<div>
<a-progress strokeColor="#21bdaf" type="circle" :percent="parseInt(zero.length/userList.length*100)" />
<p><strong>00后：</strong>{{ zero.length }}人</p>
</div>
<div>
<a-progress strokeColor="#e6a23c" type="circle" :percent="parseInt(zerofive.length/userList.length*100)" />
<p><strong>05后：</strong> {{ zerofive.length }}人</p>
</div>
<div>
<a-progress strokeColor="#2da1f7" type="circle" :percent="parseInt(other.length/userList.length*100)" />
<p><strong>其他：</strong> {{ other.length }}人</p>
</div>
</div>
</div>
</div>
<!-- </div> -->
</template>
<script>
import { getSelectAll, getSelectSex, getSelectGroup, getreportlook, getAlls, selectNumber } from '@/api/manage'
// 当前时间
const current = new Date().getFullYear() +
'-' +
(new Date().getMonth() + 1) +
'-' +
new Date().getDate() +
'-' +
new Date().getHours() +
':' +
new Date().getMinutes() +
':' + new Date().getSeconds()
export default {
data () {
return {
friendarr: [], // 朋友圈总数居
reportlook: [], // 冻结总数据
// human: [], // 冻结人数据
crowd: [], // 冻结群数据
userList: [], // 所用用户列表
sexs: [], // 性别比列数据
seventy: [], // 70后
eighty: [], // 80后
ninety: [], // 90后
ninetyfive: [], // 95后
zero: [], // 00后
zerofive: [], // 05后
other: [], // 其他
selectGroup: [], // 所有群数据
freeze: [], // 冻结人数数据
register: [], // 今日注册人数
registerfriend: [], // 今日发朋友圈条数
number: [], // 每天注册人数
substr: [] // 每天时间
}
},
created () {
// 朋友圈信息
this.getAll()
// 冻结信息
this.upReportlook()
// 所有群数据
getSelectGroup().then(res => {
this.selectGroup = res
// console.log(res)
this.selectGroup.forEach((item) => {
})
})
// 所有用户列表数据
getSelectAll().then((res) => {
console.log(res)
this.userList = res
console.log(this.userList)
console.log(current)
if (this.userList != null) {
this.userList.forEach((item) => {
// 今日注册人数
// 当前时间-注册时间<86400
if (Date.parse(current) - Date.parse(new Date(item.createdAt)) < 86400) {
this.register.push(item)
}
// 70-05后
if (parseInt(item.age.substring(0, 4)) >= 1970 && parseInt(item.age.substring(0, 4)) <= 1980) {
this.seventy.push(item)
} else if (parseInt(item.age.substring(0, 4)) >= 1980 && parseInt(item.age.substring(0, 4)) < 1990) {
this.eighty.push(item)
} else if (parseInt(item.age.substring(0, 4)) >= 1990 && parseInt(item.age.substring(0, 4)) < 1995) {
this.ninety.push(item)
} else if (parseInt(item.age.substring(0, 4)) >= 1995 && parseInt(item.age.substring(0, 4)) < 2000) {
this.ninetyfive.push(item)
} else if (parseInt(item.age.substring(0, 4)) >= 2000 && parseInt(item.age.substring(0, 4)) < 2005) {
this.zero.push(item)
} else if (parseInt(item.age.substring(0, 4)) >= 2005 && parseInt(item.age.substring(0, 4)) < 2010) {
this.zerofive.push(item)
} else {
this.other.push(item)
}
// 冻结人数数据
if (item.status === 0) {
this.freeze.push(item)
}
// 每月注册人数item === temp[i].gameLabel
if (item.createdAt.substring(6, 7) === 2) {
this.monregistration.push(item)
console.log(this.monregistration)
}
})
}
})
},
methods: {
getAll () {
getAlls().then(res => {
this.friendarr = res
// 今日发朋友圈条数
console.log(this.friendarr)
this.friendarr.forEach(item => {
// 当前时间-注册时间<86400
if (Date.parse(current) - Date.parse(new Date(item.updatedAt)) < 86400) {
this.registerfriend.push(item)
console.log(this.registerfriend)
}
})
})
},
// 冻结信息
upReportlook () {
getreportlook().then(res => {
console.log(res)
this.reportlook = res
for (let i = 0; i < this.reportlook.length; i++) {
if (this.reportlook[i].reportedType === 'group') {
this.crowd.push(i)
console.log(this.crowd.length)
}
}
})
},
// 总注册人数
Monitor () {
this.$router.push({
path: '/dashboard/Monitor',
name: 'Monitor'
})
},
// 总群
Group () {
this.$router.push({
path: '/dashboard/Group',
name: 'group'
})
},
// 总冻结列表
Blacklists () {
this.$router.push({
path: '/dashboard/blacklist',
name: 'blacklist'
})
},
// 总封停人数
edituser () {
this.$router.push({
path: '/dashboard/edituser',
name: 'edituser'
})
},
// 总朋友圈
Friends () {
this.$router.push({
path: 'dashboard/Friends',
name: 'Friends'
})
},
// 饼图
init () {
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts')
// 引入饼图
require('echarts/lib/chart/pie')
// 引入提示框和标题组件
require('echarts/lib/component/legend')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
var myChart = echarts.init(document.getElementById('myChart'))
getSelectSex().then((res) => {
if (this.sexs != null) {
// console.log(res)
this.sexs = res
// this.sexs[0]
// 总人数
const a = parseInt(this.sexs[0]) + parseInt(this.sexs[1]) + parseInt(this.sexs[2])
myChart.setOption({
color: ['#ffb43f', '#21bdaf', '#2da1f7'],
title: {
text: '性别比例',
subtext: '总注册人数 : ' + a + '人',
left: '10',
top: '10'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: '10',
top: '100',
data: ['男：' + this.sexs[0] + ' 人', '女：' + this.sexs[1] + ' 人', '保密：' + this.sexs[2] + ' 人']
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '50%',
center: ['55%', '50%'],
data: [
{ value: this.sexs[0], name: '男：' + this.sexs[0] + ' 人' },
{ value: this.sexs[1], name: '女：' + this.sexs[1] + ' 人' },
{ value: this.sexs[2], name: '保密：' + this.sexs[2] + ' 人' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: `rgba(0, 0, 0, 0.5)`
}
}
}
]
})
}
})
},
// 周比列
inits () {
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts')
// 引入柱状图
require('echarts/lib/chart/bar')
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'))
// 绘制图表
selectNumber().then((res) => {
console.log(res)
res.forEach(item => {
this.number.unshift(item.number)
this.substr.unshift(item.substr.substring(5, 10))
myChart.setOption({
color: ['#2da1f7'],
title: {
text: '每天注册人数'
},
xAxis: {
type: 'category',
data: this.substr.slice(0, 20)
},
yAxis: {
type: 'value'
},
series: [{
data: this.number.slice(0, 20),
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}]
})
})
})
},
// 每月注册比列
line () {
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts')
// 引入折线
require('echarts/lib/chart/line')
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('line'))
// 绘制图表
myChart.setOption({
color: ['#2da1f7', '#ffb43f'],
title: {
text: '每月注册比列'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['注册人数', '在线人数']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
},
yAxis: {
type: 'value'
},
series: [
{
name: '注册人数',
type: 'line',
stack: '总量',
data: [120, 132, 101, 134, 90, 230, 210, 191, 234, 290, 330, 310]
},
{
name: '在线人数',
type: 'line',
stack: '总量',
data: [120, 132, 101, 134, 90, 230, 210, 191, 234, 290, 330, 310]
}
]
})
}
},
mounted () {
// 饼图
this.$nextTick(() => {
this.init()
})
// 柱状图
this.$nextTick(() => {
this.inits()
})
// 折线图
this.$nextTick(() => {
this.line()
})
// 成员发布
// this.$nextTick(() => {
// this.membership()
// })
}
}
</script>
<style lang="less">
.statistics-page {
width: 100%;
// 头部
.atatistics-top {
display: flex;
justify-content: space-between;
height: 150px;
width: 100%;
padding: 15px;
.div {
color: white;
width: 280px;
height: 120px;
border-radius: 4px;
.strong {
display: flex;
justify-content: space-between;
padding: 10px;
}
.divimg {
height: 75px;
border-bottom: 4px solid #929bcd;
padding: 8px;
display: flex;
justify-content: space-between;
img {
width: 40px;
height: 40px;
}
}
}
.div:hover {
box-shadow: 0 0 4px 1px rgb(155, 149, 149);
}
.div:nth-child(1) {
}
.div:nth-child(2) {
}
.div:nth-child(3) {
}
.div:nth-child(4) {
}
.div:nth-child(5) {
}
}
}
// 饼图
.pie {
width: 100%;
display: flex;
justify-content: space-between;
margin-top: 25px;
.myChart {
width: 34%;
}
}
// 柱状图
.Bar {
// padding-left: 150px;
width: 65%;
}
// 折线图每月注册人数比列及人数
.registered-persons{
display: flex;
justify-content: space-between;
// border: 1px solid red;
margin-top: 25px;
.line-right{
width: 19%;
padding-top: 10px;
.text-al{
padding: 3px 10px;
font-size: 17px;
color: black;
// border: 1px solid red;
}
.line-top{
padding:0 10px;
display: flex;
.p1{
width: 35%;
// border: 1px solid red;
span{
display: inline-block;
width: 20px;
margin-right:30px ;
text-align: center;
height: 20px;
color: white;
border-radius: 10px;
}
}
.p2{
padding-right:20px ;
text-align: right;
width: 65%;
}
}
}
.line {
width: 80%;
// height: 300px;
padding: 10px;
// border: 1px solid red;
}
}
// 成员比列分布
.memberships {
margin-top: 25px;
display: flex;
justify-content: space-between;
// 进度条
.membership-left {
position: relative;
padding-top:70px ;
width: 100%;
display: flex;
justify-content: space-around;
.p{
font-size: 19px;
position: absolute;
left: 10px;
top: 10px;
}
div {
text-align: center;
}
}
.membership-right {
// width: 29%;
}
}
// 每月在线比例
.on-line{
padding: 10px;
margin-top:25px ;
width: 100%;
// border: 1px solid red;
}
</style>
本文来自博客园，作者：zjxgdq，转载请注明原文链接：https://www.cnblogs.com/zjxzhj/p/14493520.html
