前端项目小结

原创已于 2022-11-02 16:05:49 修改 · 173 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2022-01-12 09:17:34 首次发布

项目小结

1、vue

图片不同其他相同

<image
   mode="heightFix"
  :src="require(`@/static/statisstical${t.imgUrl}`)"
></image>

地址栏获取token

onLoad(e) {
    // this.$nextTick(() => {
      console.log("e",e)//这个e，就可以拿到
      // this.login(e.token)
      this.exemptLogin();
      this.subMessageNotificationCorner();
      this.getAngleMark();
    // });
  },

> 这里是引用

免登

exemptLogin() {
      var corpId;
      var that = this;
      this.$http({
        url: "/fyDataManage/dingGover/getConfig",
        method: "get",
        data: {
          dingId: "wenzhou",
        },
      })
        .then((res) => {
        //为了获取corid因为免登需要corid【找后端要】
          corpId = res.data.data.corpId;
          that.$dd//顶顶环境下才能运行
            .getAuthCode({
              corpId: corpId,//上面的接口为了此处
            })
            .then((res) => {
              that
                .$http({
                  url: "/fyDataManage/dingGover/getUserInfo",
                  method: "get",
                  data: {
                    code: res.code,//钉钉接口为了拿这个参数
                    corpid: corpId,
                    dingId: "wenzhou"//找后端要
                  },
                })
                .then((res) => {
                  console.log("查看一下返回格式", res.data.data.rbacToken);
                  localStorage.setItem("token", res.data.data.rbacToken || "");
                  this.href('/pages/index/index/index')
                })
                .catch((err) => {});
            })
            .catch((err) => {});
        })
        .catch((err) => {});
}

放入，取出store

localStorage.setItem("token", res.data.data || res.data || res);//放入store

移动端列表数据处理

this.list = [...this.list, ...formatData(res.data.data.list)];
function formatData(list) {
        if (!list.length) return [];
        return list;
      }

计时器

  onShow() {
    this.timer = setInterval(this.merge, 5000);
  },
  onHide() {
    clearInterval(this.timer);
  },

点击事件跳转

<div
   v-for="(t, i) in showListDetail.evEventDynamicList"
   :key="i"
   class="gz_dt"
   :id="'lint' + i"
>
</div>

processframe(e, arr) {
      var n = e - 1;
      const returnEle = document.querySelector("#lint" + n); //lint(n)是将要跳转区域的id
      if (!!returnEle) {
        returnEle.scrollIntoView(true); // true 是默认的
        this.currentType = n;
      }
      console.log("lint", n);
    },

2、uniapp

弹出提示框

uni.showToast({
     title: "抱歉，您无法查看此模块",//填写展示的内容
     icon:'none',//图标
     duration: 3000//持续时间
})

回答式提示框

      uni.showModal({
        content: "你确认要删除这条批示吗？",//内容
        showCancel: true,
        success:  (res)=> {
          if (res.confirm) {//如果回答确认
            this.$http({
              url: "/fyApiGateway/ding/eventInstructions",
              method: "POST",
              data: {
                id: item.id,
                status: 0
              }
            }).then(res=>{
             uni.showToast({
               icon: 'none',
               title: res.data.data,
               duration: 1000
             })
             setTimeout(()=>{
               this.getInstructions()
             },1000)
            })
          } else if (res.cancel) {//如果回答取消
            console.log("用户点击取消");
          }
        },
      });

文件上传【某种】

 // 获取上传状态【文件上传】
      select(e){
        console.log('选择文件：',e)
        e.tempFilePaths.forEach((item,index) => {
        uni.uploadFile({
          url: this.baseUrl + "/taizhou/files/upload", // 开发者服务器 url
          // files: e.tempFiles,
          filePath: item, // 要上传文件资源的路径。
          name: "files", // 文件对应的 key , 开发者在服务器端通
          formData: {
            rbacToken: window.localStorage.getItem('token')||this.rbacToken,
          },
          success: (res) => {
            console.log("文件1",JSON.parse(res.data))
            this.detail.fileId=JSON.parse(res.data).data.fileIdList.join(",")//转换格式
            console.log("文件", this.detail.fileId)
          },
          fail: (err) => {
              console.log("文件",err)
          },
        });
      });
      },

返回上一层

//1秒后返回上一层
setTimeout(() => {//计时器
  uni.navigateBack();//返回上一层
}, 1000);

3、echarts-vue

data(){
return:{
distCanvas: null,
}}
methord:{
this.distCanvas = this.getNode('dist');
getNode(nodeId) {
				return echarts.init(document.getElementById(nodeId))
	  },
setDist() {
				let option = {
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						bottom: 10,
						// right: 15,
						textStyle: {
							fontSize: 12,
						},
						itemStyle: {
							borderType: "solid",
						},
						icon: "pin"
					},
					grid: {
						top: 40,
						left: 10,
						right: 20,
						bottom: 40,
						containLabel: true
					},
					xAxis: {
						type: "category",
						axisPointer: {
							type: "shadow",
						},
						boundaryGap: true,
						axisLine: {
							show: false,
						},
						axisTick: {
							show: false,
							alignWithLabel: true
						},
						axisLabel: {
							interval: 0,
              rotate:45,
						},
						data:this.checkData.xAxis
						// data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月']
					},
					yAxis: {
						type: 'value',
						splitLine: {
							lineStyle: {
								type: "dashed",
							},
						},
					},
					series: [{
							name: '上月',
							type: 'line',
							symbol: 'none',
							lineStyle: {
								width: 1
							},
							// stack: '总量',
							data:this.checkData.yAxis.lastMonthAnomaly,
							// data: [0, 0, 0, 0, 242, 3670, 4276, 2145]
						},
						{
							name: '本月',
							type: 'line',
							symbol: 'none',
							lineStyle: {
								width: 1
							},
							// stack: '总量',
							// data: [0, 0, 0, 0, 0, 0, 0, 0]
							data:this.checkData.yAxis.monthlyAnomaly,
						}
					]
				};

				this.setCharts(this.distCanvas, option)
		},
}
setWarning() {
				let option = {
					tooltip: {
            trigger: 'axis'
          },
					legend: {
						data: ["上月", "本月"],
						bottom: 10,
						// right: 15,
						textStyle: {
							fontSize: 12,
						},
						itemStyle: {
							borderType: "solid",
						},
						icon: "pin"
					},
					grid: {
						top: 40,
						left: 10,
						right: 10,
						bottom: 40,
						containLabel: true
					},
					xAxis: [{
						type: "category",
						data:this.forecastData.xAxis,
						boundaryGap: true,
						axisLine: {
							show: false,
						},
						axisTick: {
							show: false,
							alignWithLabel: true,
						},
						axisLabel: {
							interval: 0,
						},
					}, ],
					yAxis: [{
						type: "value",
						splitLine: {
							lineStyle: {
								type: "dashed",
							},
						},
					}, ],
					series: [{
							type: "bar",
							name: "上月",
							// data: [0, 0, 0, 0, 283, 300, 562, 256],
							data:this.forecastData.yAxis.lastMonthAnomaly,
							barWidth: 10,
              color: "#5B9BD5"
						},
						{
							name: "本月",
							type: "bar",
							barWidth: 10,
							color: "#ED7D31",
							data:this.forecastData.yAxis.monthlyAnomaly,
						},
					],
				};
				this.setCharts(this.warningCanvas, option)
		},
		setCharts(node, option) {
				node.setOption(option)
		},

4、工具类

请求配置

class Request {
	constructor() { }
	request(res) {
		// 拿到请求配置
		let sendObj = {
			url: this.baseUrl + res.url,
			method: res.method,
			header: res.header,
			data: res.data,
		}
		//如果缓存里面没有token，token就从main.js里面拿
		if (uni.getStorageSync('token') == 'undefined' || !uni.getStorageSync('token')) {
			sendObj.data.rbacToken = this.rbacToken;
		} else {
			// 需要携带token就把token加到参数中
			sendObj.data.rbacToken = uni.getStorageSync('token')
		}
		// 如果是post更改请求头，大部分后端是需要json格式
		if (!sendObj.header && (res.method.toUpperCase() == "POST")) {
			sendObj.header = {
				"content-type": "application/json"
			}
		}
		// 如果是get，打平对象
		if (!sendObj.header && (res.method.toUpperCase() == 'GET')) {
			let str = '?'
			for (let key in sendObj.data) {
				str += key + '=' + sendObj.data[key] + "&"
			}
			str = str.substring(0, str.length - 1)
			sendObj.url = sendObj.url + str
		}
		return new Promise((resolve, reject) => {
			res.hideLoading ? null : uni.showLoading({
				title: '数据加载中....'
			})
			uni.request({
				...sendObj,
				success: (result) => {
					// console.log(result,'xxxx')
					// if (result.data.errorCode == 1003 || result.data.errorCode == 1004) {
					// 	// uni.navigateTo({
					// 	// 	url: '/pages/login/login'
					// 	// })
					// 	// uni.showToast({
					// 	// 	title: '登录超时，请重新登录...',
					// 	// 	duration: 2000
					// 	// })
					// 	// setTimeout(() => {
					// 	// 	uni.navigateTo({
					// 	// 		url: '/pages/login/login'
					// 	// 	})
					// 	// }, 2000)
					// }

					if (result.data.success == 1 || result.success == 1) {
						res.hideLoading ? null : uni.hideLoading()
						res.success ? res.success(result.data || result) : null
						resolve(result)
					} else {
						res.hideLoading ? null : uni.hideLoading()
						res.fail ? res.fail(result.data || result) : null
						reject(result)
					}
				},
				fail: (err) => {
					uni.hideLoading()
					res.fail ? res.fail(err) : null
					reject(err)
				}
			})
		})
	}
}
export default new Request()

路由配置

class Aplus {
    constructor({ bid, sapp_id, sapp_name }) {
        this.bid = bid
        this.sapp_id = sapp_id
        this.sapp_name = sapp_name
    }
    // 基础埋点
    basePlus({page_id,page_name,page_url}) {
        // 单页应用 或 “单个页面”需异步补充PV日志参数还需进行如下埋点：
        aplus_queue.push({
            action: 'aplus.setMetaInfo',
            arguments: ['aplus-waiting', 'MAN']
        });//
        // 单页应用路由切换后 或 在异步获取到pv日志所需的参数后再执行sendPV：
        aplus_queue.push({
            'action': 'aplus.sendPV',
            'arguments': [{
                is_auto: false
            }, {
                // 当前你的应用信息，此两行按应用实际参数修改，不可自定义。
                sapp_id: this.sapp_id,
                sapp_name: this.sapp_name,
                page_id: page_id,//'页面ID，与page 参数配合使用，保证唯一性',
                page_name: page_name,//'页面中文名称',
                page_url: page_url,// '页面URL'
            }]
        })
    }
    // 用户信息埋点
    userInfoPlus({ userName, userId }) {
        // 设置会员昵称
        aplus_queue.push({
            action: "aplus.setMetaInfo",
            arguments: ["_user_nick", userName]
        });
        // 设置会员ID
        aplus_queue.push({
            action: "aplus.setMetaInfo",
            arguments: ["_user_id", userId]
        });

        // 如采集用户信息是异步行为，需要先设置完用户信息后再执行这个START埋点
        // 此时被block住的日志会携带上用户信息逐条发出
        aplus_queue.push({
            action: 'aplus.setMetaInfo',
            arguments: ['_hold', 'START']
        });

    }
}
export default Aplus

在main.js里面
import Request from ‘./utils/request.js’
import Aplus from ‘./utils/Aplus’
Vue.prototype.$http = Request.request
let $Aplus = new Aplus({ bid, sapp_id, sapp_name }) Vue.prototype.$ Aplus = $Aplus

5、css

html的默认间距【取消】

//在App.vue文件里面设置
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

渐变色

background-image: linear-gradient(to bottom, #1492ff, #f2f3f5 20%);

字体大小随html

font-size: $t-font-size-sm;//scss

6、vue打包

//新建vue.config.js文件
module.exports = {
    //corss-env插件工具
    publicPath: process.env.VUE_APP_PUBLICPATH,
    //css共用部分设置
    css: {
        loaderOptions: {
            css: {},
            // postcss
            postcss: {
                plugins: [
                    require('postcss-px2rem')({
                        remUnit: 75
                    })
                ]
            },
            // 定义全局scss变量
            sass: {
                prependData: `
                  @import "@/global.scss";
                `
            }

        }
    },
    chainWebpack: config => {
        // 移除 prefetch 插件，不然会影响路由懒加载
        config.plugins.delete('prefetch')
        // 打包环境压缩代码
        if (process.env.NODE_ENV === 'production') {
            config.plugin('compressionPlugin')
                .use(new CompressionPlugin({
                    test: /\.js$|\.html$|\.css/, // 匹配文件名
                    threshold: 10240, // 对超过多少k的数据压缩
                    deleteOriginalAssets: false // 不删除源文件
                }))
        }
    },
    // 禁用map，不然打包体积巨大
    productionSourceMap: false
}


//开发环境——文件——.env.dev文件
# VUE_APP_BASEURL = 'http://192.168.1.97:8080'
VUE_APP_PUBLICPATH = '/'//必须有
# VUE_APP_BASEURL = 'http://192.168.1.49:8080'
VUE_APP_BASEURL = 'http://47.96.115.177:9102'//必须有
VUE_APP_CORPID = '21854'


//开发环境——文件——.env.prod文件
VUE_APP_CORPID = '196729'
VUE_APP_BASEURL = 'http://47.96.115.177:9102'//必须有
VUE_APP_PUBLICPATH = './'//必须有


//在package.json文件添加
  "scripts": {
    "serve": "vue-cli-service serve  --mode dev",//--mode dev添加部分
    "build": "vue-cli-service build  --mode prod"//--mode prod添加部分
  },

7、react

行内样式

<div style={{backgroundColor:'blue',color:'#ff671b',fontSize:40}}>行内样式测试</div>
//或者

let backAndTextColor = {
    backgroundColor:'blue',
    color:'#ff671b',
    fontSize:40
};
<div style={backAndTextColor}>行内样式测试</div>

7、react–后台模板

7.1、config.json

路由配置（侧边栏）

//这是通过接口获取
"ROUTERLIST_URL": {
    "url": "/fyDataManage/consultationBackstage/getMenu",
    "payload": {
      "parentId": "consultSentence01"
    }
  },

//这是前端写死
"STATICLIST": [
    {
      "displayName": "",
      "name": "ConsultSentence",
      "tempList": [

        {
          "name": "ConsultSentence:statisticalAnalysis",
          "displayName": "统计分析"
        },
        {
          "name": "ConsultSentence:problemSummary",
          "displayName": "问题汇总"
        }
      ]
    }
  ],

7.2、index.tsx

导入

 <a href={"./线索上报导入模板.xls"} download >下载导入模板</a>
 <Button
     type="link"
     onClick={() => window.location.href =  `${rootUrl}/taizhou/dataExcel/exportFailExcelData?operationId=${operationId}&rbacToken=${rbacToken}`}
     style={{ paddingLeft: 5 }}
     >
     下载失败内容
</Button>
 <Upload {...uploadProps}>
     <Button icon={<UploadOutlined />}>导入文件</Button>
 </Upload>
 // 导入文件
  const uploadProps = {
    name: 'file',
    action: `${rootUrl}/taizhou/dataExcel/importExcelData`,
    data: {
      rbacToken
    },
    onChange(info: any) {
      // if (info.file.status !== 'uploading') {
      //   console.log("info",info);
      // }
      console.log("11",info)
      if (info.file.status === 'done') {
        // console.log("done",info);
        if (info.file.response.success == 1) {
          // message.success(`${info.file.name} 上传成功`);
          if(info.file.response.data.failNum==0){
            Modal.success({
              title: '导入成功',
              content: info.file.response.data.importMessage,
            });
          }else{
            setVisibleFail(true)
            setMessageFail(info.file.response.data.importMessage)
            setOperationId(info.file.response.data.operationId)
          }
          reset();
        } else {
          // message.error(`${info.file.response.message}`);
          Modal.error({
            title: '导入失败',
            content: info.file.response.message,
          });
          // 清除上传文件
          info.fileList.pop()
          reset()
        }
        // setIsModalVisible(false);
      } else if (info.file.status === 'error') {
        // console.log("error",info);
        message.error(`${info.file.name} 上传失败`);
      }
    },
  };

导入

<Button onClick={exportManagement} type="primary" className="topBtn">导出</Button>
  /* 导出 */
  const exportManagement = () => {
    console.log(exportObj, 'exportObj');
    var url_ = '?rbacToken=' + rbacToken + '&pageSize=10&opposite=2';
    for (let key in exportObj) {
      if (exportObj[key]) {
        url_ += '&' + key + '=' + exportObj[key];
      }
    }
    console.log(url_);
    var url = rootUrl + '/fyPeaceConstruct/peaceThreeRate/exportPeaceThreeRatesList' + url_;
    window.location.href = url;
  };

8、全适用

图片预览

<img class="signbox" v-if="detail.imageId" :src="baseUrl+'/rbac/file/download/'+detail.imageId" />

限制字数+省略号

str.length > nwords ? str.slice(0, nwords) + '...' : str

鼠标放置悬浮显示文字

//title属性可以悬浮展示
<div title={text}>{str}</div>