欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

第三章 前端vue的编写

程序员文章站 2022-05-07 09:06:34
...

承接上章
其实vue是比较简单比较好上手的前端语言，毕竟都是封装的方法，各种引入就行，我不求多好看，只求可以跑就行了。
1.搭建好vue环境，在控制台执行npm run dev 可以生成一句话
Your application is running here: http://localhost:8080
整体的结构如下
第三章 前端vue的编写
2.其实只要知道路由就行了，在里面可以配置各个页面的跳转，就是index.js的编写

import Vue from 'vue'
import Router from 'vue-router'
import helloworld from '@/helloworld'
import index from '@/index'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/helloword',
      name: 'helloword',
      component: helloworld
    },
    {
      path: '/index',
      name: 'index',
      component: index
    }

  ]
})

配置了两个页面，第一个是登录注册页面第二个是首页。
3.页面编写首先写登陆注册页面

<template>
  <div class="hello">
  <h1>首页</h1>
  <input type="input" id="name" @change="changeName" v-model="name"><br/>
  <div class="block"></div>
  <input type="input" id="password" @change="changePassword" v-model="password"><br/>
  <div class="block" broder="1"></div>
  <button class="disenabled" v-if="disenabled" v-on:click="regist" :disabled="disenabled">注册</button>
  <button class="enabled" v-if="!disenabled" v-on:click="regist" :disabled="disenabled">注册</button>
  <button class="disenabled" v-if="disenabled" v-on:click="login" :disabled="disenabled">登录</button>
  <button class="enabled" v-if="!disenabled" v-on:click="login" :disabled="disenabled">登录</button>
  </div>
</template>

<script>
  //用于处理post请求
  import axios from 'axios'

  export default {
    name: 'App',
    data() {
      return {
        name: '',
        password: '',
        disenabled: true,
        nextStep: false,
        data: ''
      }
    },
    methods: {
      //发送post的公共方法
      post(url, params, name, functionName) {
        axios.post(url, params).then(resp => {
          this.data = resp.data
          if (this.data.retCode == "1") {
            functionName()
          } else {
            alert(2 + resp.data.retMsg);
          }
        }).catch(err => {
          console.log('请求失败：' + err.status + ',' + err.statusText);
        });
      },
      //注册方法
      regist() {
        this.post('http://192.168.102.xx:8090/nans/user/create', {
          userName: this.name, password: this.password,
          phone: 15000000000, userId: Math.round(Math.random() * 1000)
        }, "注册成功")
      },
      //登陆方法，顺便去下个页面
      login() {
        this.post('http://192.168.102.xx:8090/nans/user/login', {
          userName: this.name,
          password: this.password
        }, "登录成功", this.goToNextPage)
      },
      //去下个页面的方法
      goToNextPage() {
        if (this.data.retCode == "1") {
          this.$router.push("/index")
        }
      },
      changeName() {
        if (this.name == "") {
          alert("姓名不能为空")
        }
        this.changeButton()
      },
      changePassword() {
        if (this.password == "") {
          alert("密码不能为空")
        }
        this.changeButton()
      },
      changeButton() {
        if (this.name == "" || this.password == "") {
          this.disenabled = true
        } else {
          this.disenabled = false
        }
      }
    }
  }
</script>
<style scoped>
  #button {
    width: 100px;
  }

  .block {
    height: 20px;
    width: 100px;
  }

  .disenabled {
    color: black;
    background-color: grey;
  }

  .enabled {
    color: white;
    background-color: blue;
  }
</style>

第三章 前端vue的编写
第三章 前端vue的编写
输入姓名密码，失焦后点击注册，F12看返回显示插入成功，然后去数据库看下，生产了数据
第三章 前端vue的编写
然后用编号和密码登录，这里的编号就是我前端生产的唯一编号可以用uuid，也可以用随机的几位数，点击登录，就可以请求成功，去另一个页面了。
第三章 前端vue的编写

<template>
  <div class="index">
  <h1>首页</h1>
  </div>
</template>

<script>
  import axios from 'axios'
  export default{
    name: 'App',
    data(){
      return{
        name:'',
        password:'',
        disenabled:true,
        nextStep:false,
        data:''
      }
    },

    methods: {}}
</script>
<style scoped>
  #button{
    width: 100px;
  }
  .block{
    height:20px;
    width: 100px;
  }
  .disenabled{
    color:black;
    background-color: grey;
  }
  .enabled{
    color:white;
    background-color: blue;
  }

</style>

至于登陆注册的java方法就是增和查询，其他的一些简短的判断，数据库的密码我当然也加密了哈。
其实我vue比较菜，只会写基础主要配合页面跳转。
总结：在发post请求可能会遇见跨域的问题，需要在java代码里解决。写一个公共的config即可

package com.example.demo.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;


@Configuration
public class CorsConfig extends WebMvcConfigurerAdapter {
    static final String ORIGINS[] = new String[] { "GET", "POST", "PUT", "DELETE" };
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**").allowedOrigins("*").allowCredentials(true).allowedMethods(ORIGINS)
                .maxAge(3600);
    }
}

附上业务代码吧

package com.example.demo.controller;

import com.alibaba.fastjson.JSONObject;
import com.example.demo.enetity.ResponseBean;
import com.example.demo.service.UserService;
import com.example.demo.util.ErrorEnum;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import javax.servlet.http.HttpServletRequest;

@CrossOrigin
@RestController
@RequestMapping("/nans")
public class UserController {
    @Autowired
    UserService userService;

    @PostMapping("/user/create")
    public ResponseBean createUser(HttpServletRequest request, @RequestBody JSONObject jsonObject){
        String userId = jsonObject.getString("userId");
        String userName = jsonObject.getString("userName");
        String password = jsonObject.getString("password");
        String phone = jsonObject.getString("phone");
        if(null!=userId&&null!=userName&&null!=password&&null!=phone) {
            return userService.createUser(userId, userName, password, phone);
        }else{
            return new ResponseBean(ErrorEnum.E_1002);
        }
    }

    @PostMapping("/user/login")
    public ResponseBean loginUser(HttpServletRequest request, @RequestBody JSONObject jsonObject){
        String userName = jsonObject.getString("userName");
        String password = jsonObject.getString("password");
        if(null!=userName&&null!=password) {
            return userService.loginUser(userName, password);
        }else{
            return new ResponseBean(ErrorEnum.E_1002);
        }
    }

}

实现类

package com.example.demo.service.impl;

import com.alibaba.fastjson.JSONObject;
import com.example.demo.dao.NsUserMapper;
import com.example.demo.enetity.NsUser;
import com.example.demo.enetity.ResponseBean;
import com.example.demo.service.UserService;

import com.example.demo.util.EncryUtils;
import com.example.demo.util.ErrorEnum;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;

import java.util.Date;

@Service
public class UserServiceImpl implements UserService {

    @Autowired
    NsUserMapper nsUserMapper;


    @Value("stringPath.value")
    private  String stringPath;

    @Override
    public ResponseBean createUser(String userId,String userName,String password,String phone) {
        NsUser nsUser = new NsUser();
        Date date = new Date();
        nsUser.setUpdateUser(userId);
        nsUser.setUserId(userId);
        nsUser.setUpdateTime(date);
        nsUser.setUsername(userName);
        nsUser.setPhone(phone);
        //加密方法
        String encodePsd = EncryUtils.encode(password);
        nsUser.setPsd(encodePsd);
        NsUser nsUser1 = nsUserMapper.selectByPrimaryKey(userId);
        //有则更新无则新增
        if (null!=nsUser1){
            nsUserMapper.updateByPrimaryKey(nsUser);
        }else{
            nsUser.setCreateTime(date);
            nsUser.setCreateUser(userId);

            nsUserMapper.insert(nsUser);
        }
        ResponseBean jsonObject = new ResponseBean("1","插入成功",new JSONObject());
        return jsonObject;
    }

    @Override
    public ResponseBean loginUser(String userName, String password) {
        NsUser nsUser=null;
        if(userName!=null&& userName.length()<=6){
             nsUser = nsUserMapper.selectByPrimaryKey(userName);
        }else if(userName!=null&& userName.length()==11){
            nsUser = nsUserMapper.selectByPhone(userName);
        }else{
            return  new ResponseBean(ErrorEnum.E_1003);
        }
        if(nsUser==null){
            return  new ResponseBean(ErrorEnum.E_1003);
        }else{
            ////加密方法
            String passwordAes = EncryUtils.encode(password);
            if(passwordAes.equals(nsUser.getPsd())) {
                ResponseBean jsonObject = new ResponseBean("1", "登录成功", new JSONObject());
                return jsonObject;
            }else{
                return  new ResponseBean(ErrorEnum.E_1004);
            }

        }


    }
}

这里做完了已经实现前后端联通，下一步就是具体模块的开发和一些redis，mongdb，加密方法。还可以自己手写一个发送和返回报文的形式，总之开放性就很高了，大家加油啊。

上一篇： C语言学习与总结---第三章：顺序程序设计[01]

下一篇： 第三章 最简单的C程序设计——顺序程序设计

推荐阅读