筑坐极_Vue项目功能展示1.1

所用软件:webstream

开发工具&组件:vue&vant

项目名称cool

我现在将项目打开,先看一下展示的内容(相应的介绍也会在图中完成)

Vue项目功能展示1.1

此页面代码部分:

Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(VanImage);
Vue.use(Col);
Vue.use(Row);
Vue.use(Tabbar);
Vue.use(TabbarItem);
Vue.use(Grid);
Vue.use(GridItem);
Vue.use(Toast);
Vue.use(Icon);
Vue.use(NoticeBar);

export default {
  name: "Mine",
  data() {
    return {emp_name: '', emp_email: '', emp_inte: '0', emp_avatar: noLoginimg, label: '今日未打卡'}
  },
  methods: {
    information() {
      this.emp_name = this.$getCookie('emp_name');
      if (this.emp_name) {
        this.emp_email = this.$getCookie('emp_email');
        this.emp_inte = this.$getCookie('emp_inte');
        this.emp_avatar = this.$getCookie('emp_avatar');
      }
    },
    Ld() {
      var Ld = document.querySelector('#Ld');
      if (this.emp_name) {
        Ld.outerHTML = '<p>' + '用户名:' + this.emp_name + '\n' + '积分:' + this.emp_inte + '</p>'
      }
    },
    bacg() {
      var bacg = document.querySelector('#bacg');
      bacg.style.backgroundColor = '#0daf90'
    },
    gocard() {
      if (this.emp_name) {
        this.$router.push('./card')
      } else {
        Toast.fail('您当前未在登录状态')
      }
    },
    LookCard(){
      if (this.emp_name) {
        Toast.loading('加载中...');
        this.$router.push('./Look_Card')
      } else {
        Toast.fail('您当前未在登录状态')
      }
    },
    goblog(){
      if (this.emp_name) {
        this.$router.push('./blog')
      } else {
        Toast.fail('您当前未在登录状态')
      }
    },
    Lookblog(){
      if (this.emp_name) {
        Toast.loading('加载中...');
        this.$router.push('./LookBlog')
      } else {
        Toast.fail('您当前未在登录状态')
      }
    }
  },
  mounted() {
    this.bacg();
    this.information();
    this.Ld();
  }
}

现在点开登录界面,让我们来登录一下:

Vue项目功能展示1.1

点开右下角的注册页面,看一下效果:

Vue项目功能展示1.1

展示代码部分(登录页面):

Vue.use(Form);
Vue.use(Button);
Vue.use(Field);
Vue.use(Toast);
Vue.use(IndexBar);
Vue.use(IndexAnchor);
Vue.use(Col);
Vue.use(Row);

export default {
  name: "Login",
  data() {
    return {
      username: '',
      password: '',
      emp_name: '',// 用户名
      emp_email: '',// 邮箱
      emp_inte: '',// 积分
      emp_avatar: '',// 头像
    };
  },
  methods: {
    onSubmit(values) {
      var name = this.username;
      var pass = this.password;
      if(name && pass){
        var param = {key: 'vv9544', email: name, password: pass};
        var paramStr = this.$qs.stringify(param); // 登录指定字符
        var url = 'https://zhuzuoji.com/myapi/employee/login';
        var _this = this;
        this.$axios.post(url, paramStr).then((result) => {
          Toast.success(result.data.msg);
          if(result.data.msg == '登录成功'){
            _this.$setCookie('emp_name',result.data.info.emp_name,7);
            _this.$setCookie('emp_email',result.data.info.emp_email,7);
            _this.$setCookie('emp_inte',result.data.info.emp_inte.toString(),7);
            _this.$setCookie('emp_avatar',result.data.info.emp_avatar,7);
            _this.$router.push('/')
          }
        }).catch((error) => {
          Toast.fail('404,请检查网络')
        })
      }else{
        Toast.fail('输入框不能有空')
      }
    },
    gonum(){
      this.$router.push('/Register')
    }
  },

注册页面代码部分:

export default {
  name: "Register",
  data() {
    return {user_name: '', sms: '', em_ail: '', password: '', passxd: '', task_id: ''};
  },
  methods: {
    un_code() {
      var em_ail = this.em_ail;
      var Rsg = /^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/;
      if (Rsg.test(em_ail)) {
        let param = {key: 'vv9544', email: em_ail};
        let paramStr = this.$qs.stringify(param);
        let url = 'https://zhuzuoji.com:8443/send_email';
        let _this = this;
        this.$axios.post(url, paramStr).then((result) => {
          _this.task_id = result.data.task_id;
          Toast.success(result.data.msg)
        }).catch((error) => {
          Toast.fail('404,请检查网络')
        })
      } else {
        Toast.fail('邮箱格式错误')
      }
    },
    btn() {
      let name = this.user_name; // 用户名
      let password = this.password; // 密码
      let password_confirm = this.passxd; // 确认密码
      let email = this.em_ail; // 邮箱
      let verify_code = this.sms; // 验证码
      if (name && password && password_confirm && email && verify_code) {
        let nameRsg = /^([a-zA-Z0-9_\u4e00-\u9fa5]{4,16})$/;
        if (nameRsg.test(name)) {
          let passRsg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/;
          if (passRsg.test(password)) {
            if (password == password_confirm) {
              let params = {
                key: 'vv9544',
                email: email,
                task_id: this.task_id,
                verify_code: verify_code,
                password: password,
                password_confirm: password_confirm,
                name: name
              };
              let paramsStr = this.$qs.stringify(params);
              let _this = this;
              let url = 'http://zhuzuoji.com/myapi/employee/register';
              this.$axios.post(url, paramsStr).then((result) => {
                Toast.success(result.data.msg);
                this.$router.push('./Login')
              }).catch((error) => {
                Toast.fail('404');
              })
            } else {
              Toast.fail('两次密码输入不同')
            }
          } else {
            Toast.fail('密码8-16个字符，至少1个大写字母，1个小写字母和1个数字')
          }
        } else {
          Toast.fail('用户名4-16字符组成')
        }
      } else {
        Toast.fail('输入框不能为空')
      }
    },
    tonum() {
      this.$router.push('/Login');
    }
  }

现在登录成功,会是这样一种状态:

Vue项目功能展示1.1

之后的内容我会在1.2中写出来

代码不足请多包涵,谢谢观看

Vue项目功能展示1.1

叶世*

js,web,前端

一周vue实现移动端登录打卡,低仿微信界面

2020.09.06

912人

叶世*

天津市津南区

Hot:9197

叶世*

当前作品暂无评分

还未获得评语哦~