ARCHIVE / 2019-05-31

Vue element admin 自定義後端 (二)

Published 2019-05-31

Backend & Distributed Systems Web, Frontend & Mobile

vue element admin mock.js 換為spring boot

spring boot 首先必須熟悉一下json格式

https://segmentfault.com/a/1190000017372916

這邊可以返回簡單範例，下一章將針對 table 進行深入探討.....。

code

{"id":1,"age":18,"user-name":"Java技术栈"}

我們可以運行 vue element admin 進行觀察

在目錄底下

code

src/api/user.js

這個檔案裡

我們要把官方的 mock.js 原封不動的轉換為自訂後段 spring boot mock.js 就是一種在後端 method 還沒完成的時候，前端可以自行模擬後端產生資料

所以在開發的時候，相當方便。

怎麼做呢? 來看一下原生 dev 環境運行畫面。按下 login

可以看到 login這個地方產生了 json 也就是 token 看是否給予權限?

這邊可以看到伺服器預設返回為

code

admin-token

那麼我們來追一下程式碼在 path

code

src/store/modules/user.js

可以看到這邊是 login 呼叫事件並且產生cookies

我們來看一下 settoken是否為cookies

對的沒錯

那我們只要村造他的規則，基本上只要改

code

src/api/user.js

就可以進行無痛從 mock.js 改為其他後端restful，只要符合他的規則

(當然後面比較熟悉一點可以對她進行更深入的改動。那我們可以看到

在這邊的話

我們更動為

code

return request({
    url: 'http://localhost:9990/httpMethod',
    method: 'post',
    data: {
      name: data.username,
      pwd: data.password
    }
  })

在這個部分的話，我傳了使用者id，與 password 給伺服器，伺服器在根據所分配的權限給予前端再來根據權限來決定畫面如何呈現。

url的部分我們更改為我們自己後端，這邊需要根據自行選用後端進行相關設定與配置

例如我們上一章，所說的跨網域等等，相關設定。這邊我們來看 spring boot 如何設定

code

@ComponentScan(basePackages = {"com.demo.controller"}) 

@Controller

@RestController
@RequestMapping("/")
@EnableAutoConfiguration
@CrossOrigin(origins = "http://172.16.7.21:9527", maxAge = 3600)
public class DemoApplication {

// //    跨網域
   @Bean
     public WebMvcConfigurer corsConfigurer() {
         return new WebMvcConfigurer() {
             @Override
             public void addCorsMappings(CorsRegistry registry) {
                 registry.addMapping("/httpMethod/**")
                         .allowedOrigins("http://localhost:9528");//允许域名访问，如果*，代表所有域名
                 //.allowedOrigins("http://localhost:9527");//允许域名访问，如果*，代表所有域名
                 registry.addMapping("/httpMethod2/**")
                    .allowedOrigins("http://localhost:9527");//允许域名访问，如果*，代表所有域名
             }
         };
     }

 Login memberAccount;
 @CrossOrigin
 @PostMapping(value = "/httpMethod", produces = "application/json")
 @ResponseBody
 public Login  httpMethod(@RequestBody Map<String, Object> params) throws JsonProcessingException{
 System.out.println("sent name is "+  params.get("name").toString());
 System.out.println("sent pwd is "+  params.get("pwd").toString());
 if( params.get("name").equals("admin")   &&  params.get("pwd").equals("111111" ) ) {
  Login memberAccount = new Login();

  memberAccount.setCode(20000);
  Token test = new Token();
  memberAccount.setData(test);
  ObjectMapper objectMapper = new ObjectMapper();

  String userJsonStr = objectMapper.writeValueAsString(memberAccount);
  System.out.print(userJsonStr);
  return memberAccount;
 }
 return memberAccount;
 }

 @CrossOrigin
    @GetMapping("/httpMethod2")
 @ResponseBody
 public String httpMethod2(){
 System.out.println("sent name is ");
 System.out.println("sent pwd is ");
 return "success";
 }

}

Json 與 CORS 跨網域紀錄

這邊稍微紀錄如何使用跨網域和 jackson java

在 spring boot 所以用的 json 好像是 fastjson 他好像跟jackson 差不多

https://segmentfault.com/a/1190000005717319

來介紹一下如後透過 java class to json 很簡單，

只要

code

Login memberAccount = new Login();
memberAccount.setCode(20000);
Token test = new Token();
memberAccount.setData(test);


    ///這邊是我 自己看能不能把 java 轉成 字串測試
    ObjectMapper objectMapper = new ObjectMapper();
String userJsonStr = objectMapper.writeValueAsString(memberAccount);
System.out.print(userJsonStr);

//到了 return 前端所接收到的就是一個 json 格式的字串了
return memberAccount;

後端 restful 好了之後可以發現，已經可以移植成功!

後面會有詳細的git… DemoApplication.java

code

package com.demo;

import org.springframework.boot.SpringApplication;
import com.demo.*;

import org.springframework.boot.autoconfigure.EnableAutoConfiguration;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.web.servlet.ServletComponentScan;

import static org.junit.Assert.assertEquals;

import java.util.Arrays;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;

import org.apache.catalina.filters.CorsFilter;
import org.omg.CORBA.Environment;
import org.springframework.boot.CommandLineRunner;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.ApplicationContext;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.servlet.ModelAndView;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

import com.demo.controller.HelloController;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.model.Dome;
import com.model.Dome2;
import com.model.Login;
import com.model.Shop;
import com.model.Token;


@ComponentScan(basePackages = {"com.demo.controller"}) 

@Controller

@RestController
@RequestMapping("/")
@EnableAutoConfiguration
@CrossOrigin(origins = "http://172.16.7.21:9527", maxAge = 3600)
public class DemoApplication {
//    @RequestMapping("/test/{test}")
//    @ResponseBody
//      public String sayHello(@PathVariable("test") String test) {
//         System.out.print("test");
//          return   new HelloController().sayHello("hello");
//      }

      @RequestMapping(value = "/hello", method = RequestMethod.GET)
      public ModelAndView hello(Map<String,Object> map){
      map.put("key","value");
      ModelAndView modelAndView = new ModelAndView();
      modelAndView.setViewName("web");
      modelAndView.addObject(map);
      return modelAndView;
      }

    public static void main(String[] args) throws Exception  {
        SpringApplication.run(DemoApplication.class, args);

    }

    @RequestMapping("/add")
    public String addSession(HttpServletRequest httpServletRequest,
                            @RequestParam("username")String username) {
        HttpSession session = httpServletRequest.getSession();
        session.setAttribute("username",username);
        session.setMaxInactiveInterval(10000);
        return "添加成功";
    }

    @RequestMapping("/show")
    // 跨網域
    public Object showSession(HttpServletRequest httpServletRequest) {
        HttpSession session = httpServletRequest.getSession();
        Object object = session.getAttribute("username");
        return object;
    }
//
//      @Configuration
//     private CorsConfiguration buildConfig() {
//          CorsConfiguration corsConfiguration = new CorsConfiguration();
//          corsConfiguration.addAllowedOrigin("*"); // 1
//          corsConfiguration.addAllowedHeader("*"); // 2
//          corsConfiguration.addAllowedMethod("*"); // 3
//          return corsConfiguration;
//      }
//   
//      @Bean
//      public CorsFilter corsFilter() {
//          UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
//          source.registerCorsConfiguration("/**", buildConfig()); // 4
//          return new CorsFilter();
//      }
//  //    跨網域
      @Bean
        public WebMvcConfigurer corsConfigurer() {
            return new WebMvcConfigurer() {
                @Override
                public void addCorsMappings(CorsRegistry registry) {
                    registry.addMapping("/httpMethod/**")
                            .allowedOrigins("http://localhost:9528");//允许域名访问，如果*，代表所有域名
                    //.allowedOrigins("http://localhost:9527");//允许域名访问，如果*，代表所有域名
                    registry.addMapping("/httpMethod2/**")
                    .allowedOrigins("http://localhost:9527");//允许域名访问，如果*，代表所有域名
                }
            };
        }


    Login memberAccount;
    @CrossOrigin
    @PostMapping(value = "/httpMethod", produces = "application/json")
    @ResponseBody
    public Login  httpMethod(@RequestBody Map<String, Object> params) throws JsonProcessingException{
    System.out.println("sent name is "+  params.get("name").toString());
    System.out.println("sent pwd is "+  params.get("pwd").toString());
    if( params.get("name").equals("admin")   &&  params.get("pwd").equals("111111" ) ) {
        Login memberAccount = new Login();

        memberAccount.setCode(20000);
        Token test = new Token();
        memberAccount.setData(test);
        ObjectMapper objectMapper = new ObjectMapper();

        String userJsonStr = objectMapper.writeValueAsString(memberAccount);
        System.out.print(userJsonStr);
        return memberAccount;
    }
    return memberAccount;
    }

    @CrossOrigin
    @GetMapping("/httpMethod2")
    @ResponseBody
    public String httpMethod2(){
    System.out.println("sent name is ");
    System.out.println("sent pwd is ");
    return "success";
    }

//  @CrossOrigin
//  @RequestMapping(value = "/httpMethod")
//  @ResponseBody
//  public Shop httpMethod(){
////    System.out.println("sent name is "+  params.get("name").toString());
////    System.out.println("sent pwd is "+  params.get("pwd").toString());
////
////      
//    Shop memberAccount = new Shop();
//    
////    if( params.get("name").equals("admin")   &&  params.get("pwd").equals("111111" ) ) {
////        
//      memberAccount.set_name( "test");
//      memberAccount.set_pwd ("test2");
//      
//      return memberAccount;
//      }
////    }
////    return memberAccount;
////    }
}

Login.java

code

package com.model;

import java.awt.print.Book;

public class Login {

    private Integer code;
    private Token data;

    public Login(){

    }

    public Login(Integer code, String data,String name,String[] tmp) {
        super();
        this.code = code;

    }

    public Integer getCode() {
        return code;
    }

    public void setCode(Integer code) {
        this.code = code;
    }


    public Token getData() {
        return data;
    }
    public void setData(Token data) {
        this.data = data;
    }
}

Token.java

code

package com.model;

public class Token {

    private String token="admin-token";


//  private List<Author> author = new ArrayList<Author>();

    public void settoken (String token){
        this.token = token;
    }
    public String gettoken(){
        return  token;
    }


    public Token(){

    }



//  public List<Author> getAuthor() {
//      return author;
//  }
//  public void setAuthor(List<Author> author) {
//      this.author = author;
//  }

}

Original Blogger labels · 3

#Spring Boot #Tutorial #Vue.js

vue element admin mock.js 換為spring boot

Json 與 CORS 跨網域 紀錄

Comments

Json 與 CORS 跨網域紀錄