• Welcome to the world's largest Chinese hacker forum

    Welcome to the world's largest Chinese hacker forum, our forum registration is open! You can now register for technical communication with us, this is a free and open to the world of the BBS, we founded the purpose for the study of network security, please don't release business of black/grey, or on the BBS posts, to seek help hacker if violations, we will permanently frozen your IP and account, thank you for your cooperation. Hacker attack and defense cracking or network Security

    business please click here: Creation Security  From CNHACKTEAM

瞎写系列-Vue跨域获取本地服务器数据(购物商品数据)


Recommended Posts

因为正好有个一个作业 所以随便在博客上写写

代码:https://gitee.com/akyaky/vue-cross-domain-test

数据库篇

数据库没什么好说的数据什么的自己加用结构化查询语言语句或者可视化工具都行

这里我用的是mysql Navicat Premium的组合

具体如下即名称图片链接价格

metrkksd3hg3032.png

我们要做的就是用javaweb获取到这些数据然后发送到某视频剪辑软件网页上

javaweb/ssm篇(提前搞好对应java架包)

万事先写类写一个商品类

一包com。徐。豆;

2

3公共类商品{

四私有字符串名;

5私有字符串全球资源定位器(Uniform Resource Locator)

6私串价;

七公共字符串getName() {

8返回名称;

9 }

10

11 public void setName(字符串名){

12 this.name=name

13 }

14

15公共字符串getUrl() {

16返回全球资源定位器(Uniform Resource Locator)

17 }

18

19 public void setUrl(字符串url) {

20 this.url=url

21 }

22

23公共字符串getPrice() {

24返回价格;

25 }

26

27公共无效定价(字符串价格){

28 this.price=价格;

29 }

30

31 @超越

32公共字符串toString() {

33退回"货物"

34 'name='' name '\ ' '

35 ',url='' url '\ ' '

36 ',price='' price '\ ' '

37 '}';

38 }

39

40 }

我们应该去链接数据库固定文件数据库属性放在资源

driver=com。MySQL。CJ。JDBC。驾驶员

URL=JDBC :我的SQL ://localhost :3306/shopping?useSSL=falseserverTimezone=UTC

用户名=根

密码=123456

从上往下依次是驱动全球资源定位器(统一资源定位器)用户名密码如果有不一样的比如用户名/密码/表面/端口需要进行改动

有了这个之后我们应该获取然后链接数据库

DBUtils文件

一包com。徐。utils

2

3导入Java。SQL。*;

四导入Java。util。资源包;

5

6个公共类DBUtils {

七私有静态字符串驱动;

8私有静态字符串全球资源定位器(Uniform Resource Locator)

9私有静态字符串用户名;

10个私有静态字符串密码;

11

12静态{//获取数据,加载驱动

13 //获取文件

14资源束bundle=资源束。获取包(' db ');

15 //加载数据

16驱动=捆绑。getstring(' driver ');

17 URL=捆绑。getstring(' URL ');

18 username=bundle.getString('用户名');

19密码=捆绑。getstring(' password ');

20 //jdbc连接数据库

21

try { 22 //Class.forName是初始化给定的类 这样就能分辨数据库类型 初始化对应数据库的类 23 Class.forName(driver); 24 } catch (ClassNotFoundException e) { 25 e.printStackTrace(); 26 } 27 28 } 29 30 public static Connection getConnection(){ 31 Connection conn = null; 32 try { 33 //获取数据库的连接 34 conn = DriverManager.getConnection(url, username, password); 35 } catch (SQLException e) { 36 e.printStackTrace(); 37 } 38 return conn; 39 } 40 //一个关闭功能 用来关闭中间产生的ResultSet Statement Connection 41 public static void close(ResultSet rs, Statement stmt,Connection conn){ 42 if(rs!=null){ 43 try { 44 rs.close(); 45 } catch (SQLException e) { 46 e.printStackTrace(); 47 } 48 } 49 if(stmt!=null){ 50 try { 51 stmt.close(); 52 } catch (SQLException e) { 53 e.printStackTrace(); 54 } 55 } 56 if(conn!=null){ 57 try { 58 conn.close(); 59 } catch (SQLException e) { 60 e.printStackTrace(); 61 } 62 } 63 64 } 65 66 }

写一个接口和实现类 得到商品数据

接口

1 package com.xu.dao;
2 
3 import com.xu.bean.Goods;
4 
5 import java.util.List;
6 
7 public interface GoodsDao {
8     public List<Goods> getgoods();
9 }

实现

 1 package com.xu.dao;
 2 
 3 import com.xu.bean.Goods;
 4 import com.xu.utils.DBUtils;
 5 
 6 import java.sql.Connection;
 7 import java.sql.PreparedStatement;
 8 import java.sql.ResultSet;
 9 import java.sql.SQLException;
10 import java.util.ArrayList;
11 import java.util.List;
12 
13 public class GoodsDaoImp implements GoodsDao {
14     public List<Goods> getgoods() {
15         //List集合存放Goods类型 多态
16         List<Goods> recordList = new ArrayList<Goods>();
17         //得到数据库连接conn
18         Connection conn = DBUtils.getConnection();
19         try {
20             //PreparedStatement用来进行一次性操作连接
21             PreparedStatement ps = conn.prepareStatement("select * from goods");
22             //将得到的结果返回给ResultSet类型的rs
23             ResultSet rs= ps.executeQuery();
24             //遍历一下把rs里的数据放入recordList
25             while(rs.next()){
26                 Goods g=new Goods();
27                 g.setName(rs.getString("name"));
28                 g.setUrl(rs.getString("picture"));
29                 g.setPrice(rs.getString("Price"));
30                 recordList.add(g);
31             }
32             //关闭连接
33             DBUtils.close(rs,ps,conn);
34             //返回一下recordList数据
35             return recordList;
36         } catch (SQLException e) {
37             e.printStackTrace();
38         }
39         return null;
40     }
41 }

还差最后一步将数据放到本地服务器上然后还能看见

LoginServlet

 1 package com.xu.web;
 2 
 3 import com.alibaba.fastjson.JSONObject;
 4 import com.xu.bean.Goods;
 5 import com.xu.dao.GoodsDao;
 6 import com.xu.dao.GoodsDaoImp;
 7 import org.apache.commons.beanutils.BeanUtils;
 8 
 9 import javax.servlet.ServletException;
10 import javax.servlet.annotation.WebServlet;
11 import javax.servlet.http.HttpServlet;
12 import javax.servlet.http.HttpServletRequest;
13 import javax.servlet.http.HttpServletResponse;
14 import java.io.IOException;
15 import java.io.PrintWriter;
16 import java.util.List;
17 //注解 如果地址是/adv则读取信息
18 @WebServlet(urlPatterns = "/adv")
19 public class LoginServlet extends HttpServlet {
20     //重写doGet方法
21     @Override
22     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
23         //头信息
24         response.setContentType("application/json;charset=utf-8");
25 
26         //这里new一个Goods
27         Goods good=new Goods();
28         try {
29             //将request中的参数映射到User Bean中的set和get方法
30             BeanUtils.populate(good,request.getParameterMap());
31             //创建类接口调用方法获取数据
32             GoodsDao gs=new GoodsDaoImp();
33             //将数据库获取的数据给List集合
34             List<Goods> recordList=gs.getgoods();
35             //写入到网页
36             PrintWriter writer = response.getWriter();
37             String  jsonObject = JSONObject.toJSON(recordList).toString();
38             writer.write(jsonObject);
39             //控制台输出测试
40             System.out.println("json字符串"+jsonObject);
41 //            if(u!=null){//分发转发
42 //                request.getSession().setAttribute("user",u);
43 ////              response.sendRedirect(request.getContextPath()+"/home.html");
44 //                //http://localhost:9000/mvc_web/
45 //                response.sendRedirect(request.getContextPath()+"/home.jsp");
46 //            }
47 
48         } catch (Exception e) {
49             e.printStackTrace();
50         }
51     }
52     //默认不重写
53     @Override
54     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
55         doGet(req,resp);
56     }
57 }

放在tomcat上运行一下

访问/adb 得到

0qgoktypheu3033.png

成功!

Vue篇

首先配置一下

manifest.json->源码识图 最后加入

 1 "vueVersion" : "2",
 2     "h5":{
 3          "devServer":{
 4           "host":"localhost",
 5           "port":8080,
 6           "disableHostCheck":true,
 7           "proxy":{
 8            "/" :{
 9             "target":"http://localhost:9999/untitled3_war/",
10             "changeOrigin":true,
11             "secure":false
12                   }
13                     }
14                      }
15         }
16 }

target是你的tomcat工件的网址 其他的暂时不用改

然后写一个简单的页面

 1 <template>
 2     <view class="content">
 3         <scroll-view scroll-y>
 4             <!--遍历取goods里面的内容 链接用url-->
 5             <view v-for="(item,index) in goods" :key="index" class="content">
 6                 <p>{{item.name}}</p>
 7                 <image :src="item.url"></image>
 8                 <p>价格:{{item.price}}</p>
 9             </view>
10         </scroll-view>
11        
12         
13     </view>
14 </template>
15 
16 <script>
17     export default {
18         data() {
19             return {
20                 goods:[
21                 ]
22             }
23         },
24         onl oad() {
25             
26         },
27         onReady(){
28             //请求
29             uni.request({
30                 //使用#ifdef 区分浏览器与小程序 因为加载不一样 
31                 // #ifdef H5
32                 url:"/adv",
33                 // #endif
34                 // #ifdef MP-WEIXIN
35                 url:"http://localhost:9999/untitled3_war/adv",
36                 // #endif
37                 //获取成功则
38                 success: (res) => {
39                     //控制台输出
40                     console.log(res.data)
41                     //加入goods中
42                     this.goods=res.data
43                 }
44             })
45         },
46         methods: {
47     },
48 }
49 </script>
50 
51 <style>
52     .content {
53         display: flex;
54         flex-direction: column;
55         align-items: center;
56         justify-content: center;
57         border:5px solid red;
58     }
59 
60 </style>
61 <!-- 无聊的阿库娅 -->

好了看一下网页

o4jquwphdbg3034.pngv5o3pwgiczk3035.png

能够正常获取了 如果不能获取可以检查上面的步骤 记得更改各种东西 比如用户名 服务器网址等 这里不在赘述

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now