Vue element admin 自定義 後端 (二)

vue element admin mock.js 換為spring boot 

spring boot 首先必須熟悉一下json格式
https://segmentfault.com/a/1190000017372916
這邊可以返回簡單範例 ， 下一章將針對 table 進行深入探討.....。

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

我們可以運行 vue element admin 進行 觀察
在目錄底下

src/api/user.js

這個檔案裡

我們要把官方的 mock.js 原封不動 的 轉換為自訂 後段 spring boot

mock.js 就是一種 在 後端 method 還沒完成的時候，前端可以自行模擬後端 產生資料
所以在開發的時候，相當方便。
怎麼做呢? 來看一下 原生 dev 環境 運行畫面。

按下 login

可以看到 login這個地方產生了 json 也就是 token 看是否給予權限?
這邊可以看到 伺服器預設返回為

admin-token

那麼 我們來追一下程式碼

在 path

src/store/modules/user.js

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

我們來看一下 settoken是否為cookies
對的沒錯

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

src/api/user.js

就可以進行無痛從 mock.js 改為 其他 後端restful ，只要 符合他的規則
(當然後面比較熟悉一點可以對她進行更深入的改動。

那我們可以看到

在這邊的話

我們更動為

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

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

---

url的部分 我們更改為 我們自己後端， 這邊需要 根據 自行選用後端進行相關 設定與配置
例如我們上一章，所說的 跨網域 等等 ，相關設定。

這邊我們來看 spring boot 如何設定

@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 很簡單，
只要

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…

	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;
	//// }
	}

view raw DemoApplication.java hosted with ❤ by GitHub

	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;
	}
	}

view raw Login.java hosted with ❤ by GitHub

	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;
	// }
	}

view raw Token.java hosted with ❤ by GitHub

Vue element admin 初步環境搭建和亂玩 (一)

Vue element admin

vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你，後期將會針對各個部件進行後續寫文章。

https://panjiachen.github.io/vue-element-admin-site/zh/guide/

在線預覽
https://panjiachen.gitee.io/vue-element-admin/#/login?redirect=%2Fdashboard

環境搭建

這邊採用 多國語系版本， 目前需要加設 在login 登入 到 menu這一段 需要 新增後端配合，
這邊簡單使用 spring 來小配合demo。

github : vue-element-admin

這邊我們使用 多國語言版 分支

git clone https://github.com/PanJiaChen/vue-element-admin.git

Getting Started

我在桌面底下 資料夾 把 專案下載至test2 資料夾
這邊要直接下載資料夾， 或者是 git clone 是現在目前線上 最新版本

複製到目錄底下

install dependency

npm install

develop

npm run dev

使用 打包ing

http://localhost:9527/

需要開發

1. Login/Menu 兩個項目為主要的開發
2. 採用SSL
3. Seession測試"
4. iCura 已具備多國語言
5. pdf 預覽

visual code 環境搭建

安裝套件

點擊install

修復 eslint vscode存檔 格式 出錯

  "scripts": {
    "dev": "vue-cli-service serve",
    "build:prod": "vue-cli-service build",
    "build:stage": "vue-cli-service build --mode staging",
    "preview": "node build/index.js --preview",
    "lint": "eslint  src --fix",
    "test:unit": "jest --clearCache && vue-cli-service test:unit",
    "test:ci": "npm run lint && npm run test:unit",
    "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
    "new": "plop"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{js,vue}": [
      "eslint --fix",
      "git add"
    ]
  },

修復 vscode 存檔 雙引號問題

{
  "prettier.singleQuote": true,
  "prettier.semi": false,
  "as3mxml.sdk.searchPaths": ["c:\\Users\\x213212\\Downloads\\4.14.1\\4.14.1"],
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "python.pythonPath": "C:\\Users\\x213212\\AppData\\Local\\Continuum\\anaconda3\\pythonw.exe",
  "terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\cmd.exe",
  "go.gocodeAutoBuild": true,
  "editor.suggestSelection": "first",
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue"
}

現在 ctrl+s ，不會再出現 單引號 自動 變成雙引號的問題囉~

vue 如何優雅的取值

https://www.sunzhongwei.com/how-to-get-input-value-in-vuejs

getpost

https://stackoverflow.com/questions/43646844/cannot-read-property-post-of-undefined-vue

npm install --save vue-resource

cors 跨網域

https://kuro.tw/posts/2017/06/07/如何在-Vue-CLI-建立的開發環境呼叫跨域遠端-RESTful-APIs/

Jquery ajax, Axios, Fetch区别之我见

https://segmentfault.com/a/1190000012836882

使用 axios 不使用 ajax

Vue2.0之后，尤雨溪推荐大家用axios替换JQuery ajax，想必让Axios进入了很多人的目光中。Axios本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，从它的官网上可以看到它有以下几条特性：

从 node.js 创建 http 请求
支持 Promise API
客户端支持防止CSRF
提供了一些并发请求的接口（重要，方便了很多的操作）
这个支持防止CSRF其实挺好玩的，是怎么做到的呢，就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略。

Axios既提供了并发的封装，也没有下文会提到的fetch的各种问题，而且体积也较小，当之无愧现在最应该选用的请求的方式。

npm install --save axios vue-axios

spring cros 跨域

   @Bean
     public WebMvcConfigurer corsConfigurer() {
         return new WebMvcConfigurer() {
             @Override
             public void addCorsMappings(CorsRegistry registry) {
                 registry.addMapping("/httpMethod/**")
                         .allowedOrigins("http://localhost:9527");//允许域名访问，如果*，代表所有域名
                 registry.addMapping("/httpMethod2/**")
                    .allowedOrigins("http://localhost:9527");//允许域名访问，如果*，代表所有域名
             }
         };
     }
 
 @CrossOrigin
    @PostMapping("/httpMethod")
 @ResponseBody
 public String httpMethod(@RequestBody Map<String, Object> params){
 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" ) ) {
  return "success";
 }
 return "fail";
 }


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

https://ithelp.ithome.com.tw/articles/10194612

spring boot 其他參數端口設定

server.port=9990

spring 加掛 ssh 其他參數設定

https://blog.csdn.net/beguile/article/details/80053956
這邊跟之前做串流伺服器一樣可以加掛 ssh

spring 簡單安裝

https://ithelp.ithome.com.tw/articles/10192344

實現簡單 login / menu 登入

https://www.jianshu.com/p/587c56ed9dfa

json 攔截

http://mockjs.com/

簡單攔截器

http://www.zhongruitech.com/521499842.html